使用javascript动态删除表单元素
[英]dynamically remove form elements using javascript
问题描述
I want to dynamically remove form elements using javascript. 
我想使用javascript动态删除表单元素。 The code below is simple and dynamically adds form elements. 下面的代码很简单，可以动态添加表单元素。
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. 我通过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. 例如，第一次添加表单元素“名字”将被引用为“ 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>
3 个解决方案
解决方案1
5 已采纳 2013-08-22 07:07:17
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();
}
解决方案2
0 2013-08-22 06:48:52
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 :- 简单检查click事件，并使用以下代码删除该父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);
}
解决方案3
0 2013-08-22 07:09:08
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);
Check this link for better understanding: 检查此链接以获得更好的理解：
http://www.w3schools.com/htmldom/dom_elements.asp http://www.w3schools.com/htmldom/dom_elements.asp
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.