Html 使用javascript动态删除表单元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18373379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
dynamically remove form elements using javascript
提问by user2484214
I want to dynamically remove form elements using javascript. The code below is simple and dynamically adds form elements.
我想使用 javascript 动态删除表单元素。下面的代码很简单，动态添加表单元素。
My form looks like (sorry, tried to get it working in jsfiddle but couldn't. Definitely works on my own servers though):
我的表单看起来像（对不起，试图让它在 jsfiddle 中工作但不能。虽然绝对可以在我自己的服务器上工作）：
"first name" "last name" "age"
Add more data (button) Submit (button)
“名字” “姓氏” “年龄”
添加更多数据（按钮） 提交（按钮）
If you click on Add more data you get
如果你点击添加更多数据，你会得到
"first name" "last name" "age"
"first name" "last name" "age" "remove (button)"
Add more data (button) Submit (button)
“名字” “姓氏” “年龄”
“名字” “姓氏” “年龄” “删除（按钮）”
添加更多数据（按钮） 提交（按钮）
I record every new row via fooID+x+i. Eg the first time you add form element "first name" would be referenced as "foo10", "last name" will be "foo11" and so forth.
我通过 fooID+x+i 记录每一个新行。例如，第一次添加表单元素时，“名字”将被引用为“foo10”，“姓氏”将是“foo11”等等。
How do I fix the below to dynamically remove form elements that are being clicked on to be removed?
如何修复以下内容以动态删除正在单击以删除的表单元素？
<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>
采纳答案by Alireza Amiri
This will work for you :
这对你有用：
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();
}
回答by Aashray
If you want to remove an element, you need to get the parent and child reference, use the following function to remove that element:
如果要删除元素，则需要获取父子引用，使用以下函数删除该元素：
parent.removeChild(child);
parent.removeChild(child);
Check this link for better understanding:
检查此链接以更好地理解：
回答by Roopendra
As per my understanding you want to remove complete div in which your
根据我的理解，您要删除完整的 div
"first name" "last name" "age" "remove (button)"
exist. Simple check click event and remove that parent div by using below code :-
存在。使用以下代码简单检查单击事件并删除该父 div：-
$('#removeButtonID').click(function(){
$(this).parent('div').remove();
});
Pure Javascript :-
纯 Javascript :-
function removeRow(r)
{
var d = document.getElementById('myDiv');//Parent Div ID
var olddiv = document.getElementById(r);
d.removeChild(olddiv);
}
