使用javascript动态删除表单元素
[英]dynamically remove form elements using javascript
问题描述
我想使用javascript动态删除表单元素。 下面的代码很简单，可以动态添加表单元素。
我的表单看起来像（对不起，试图使其在jsfiddle中运行，但不能。但是绝对可以在我自己的服务器上运行）：
“名字”“姓氏”“年龄”
添加更多数据（按钮）提交（按钮）
如果单击添加更多数据，您将获得
“名字”“姓氏”“年龄”
“名字”“姓氏”“年龄”“删除（按钮）”
添加更多数据（按钮）提交（按钮）
我通过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>
3 个解决方案
解决方案1
5 已采纳 2013-08-22 07:07:17
这将为您工作：
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
根据我的理解，您想删除其中的完整div
"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);
}
解决方案3
0 2013-08-22 07:09:08
如果要删除元素，则需要获取父子引用，请使用以下函数删除该元素：
parent.removeChild(child);
检查此链接以获得更好的理解：
如何使用JavaScript动态删除Zend Form API生成的HTML表单元素？
[英]How can I dynamically remove HTML form elements generated by Zend Form API, using JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.