使用javascript动态移除表单元素

我想动态移除使用javascript的表单元素。下面的代码很简单，并动态添加表单元素。使用javascript动态移除表单元素

我的形式看起来像（对不起，试图得到它的jsfiddle工作，但不能肯定的作品在我自己的服务器虽然。）：

“名字”，“姓氏”，“年龄”
添加更多的数据（按钮）提交（按钮）

如果您单击添加更多的数据你

“名字”，“姓氏”，“年龄”
“名字”，“姓氏”，“年龄” “删除（按钮）”
添加更多数据（butto n）提交（按钮）

我通过fooID + x + i记录每个新行。例如，第一次添加表单元素“名字”将被引用为“foo10”，“姓氏”将是“foo11”等等。

如何解决以下问题以动态删除正在被点击的表单元素以进行删除？

<script language="javascript"> 
function removeRow(r) 
{ 
/********************* 
Need code in here 
*********************/ 
} 
</script> 

var x = 1; 

function add() { 
var fooId = "foo"; 

for (i=1; i<=3; i++) 
    { 
    //Create an input type dynamically. 
    var element = document.createElement("input"); 

    //Assign different attributes to the element. 
    element.setAttribute("type", fooId+x+i); 
    element.setAttribute("name", fooId+x+i); 
    element.setAttribute("id", fooId+x+i); 

    if(i==1){ 
      element.setAttribute("value", "First name"); 
    } 
    if(i==2){ 
      element.setAttribute("value", "Last name"); 

    } 
    if(i==3){ 
     element.setAttribute("value", "age"); 

    }   
    var foo = document.getElementById("fooBar"); 
    foo.appendChild(element); 
    foo.innerHTML += ' '; 

} 
     i++;    
      var element = document.createElement("input"); 
element.setAttribute("type", "button"); 
element.setAttribute("value", "Remove"); 
element.setAttribute("id", fooId+x+i); 
element.setAttribute("name", fooId+x+i);  
element.setAttribute("onclick", "removeRow(this)"); 
foo.appendChild(element); 

    var br = document.createElement("br"); 
foo.appendChild(br); 

x++; 

} 
</SCRIPT> 

<body> 
<center> 

<form id="form" name="form" action="test.php" method="post" enctype="multipart/form-data"> 

<input type="text" id="foo01" name="foo01" value="first name"> 

<input type="text" id="foo02" name="foo02" value="last name"/> 
<input type="text" id="foo03" name="foo03" value="age"> 
<br> 
<span id="fooBar"></span> 

<FORM> 

<INPUT type="button" value="Add more data" onclick="add()"/> 
<input type="submit" value="Submit"> 
</center> 
</FORM> 

</form> 

</body>

来源

2013-08-22 user2484214

你为什么包括一个'FORM'元素到另一个？ –

这会为你工作：

function removeRow(r) 
{ 
    var fooId = "foo"; 
    var id = r.id.substring(3,r.id.length-1); 
    for(i=1;i<=3;i++) 
    { 
     document.getElementById(fooId+id+i).remove(); 
    } 
    document.getElementById(fooId+id+5).nextSibling.remove(); 
    document.getElementById(fooId+id+5).remove(); 
}

来源

2013-08-22 07:07:17

按我的理解，要删除其中的

"first name" "last name" "age" "remove (button)"

存在完整的股利。简单的检查click事件，并通过使用下面的代码删除父DIV： -

$('#removeButtonID').click(function(){ 

    $(this).parent('div').remove(); 
});

纯JavaScript： -

function removeRow(r) 
{ 
    var d = document.getElementById('myDiv');//Parent Div ID 
    var olddiv = document.getElementById(r); 
    d.removeChild(olddiv); 
}

来源

2013-08-22 06:48:52 Roopendra

该用户正在使用纯JavaScript。 – palerdot

如果你想删除元素，您需要获取父级和子级引用，使用以下函数删除该元素：

parent.removeChild(child);

检查此链接为更好地理解：

http://www.w3schools.com/htmldom/dom_elements.asp

来源

2013-08-22 07:09:08 Aashray

使用javascript动态移除表单元素

回答

相关问题