5

我想使用 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>
4

3 回答 3

5

这对你有用：

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-22T07:07:17.253 回答
0

根据我的理解，您想删除完整的 div

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

存在。简单检查单击事件并使用以下代码删除该父 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-22T06:48:52.490 回答
0

如果要删除一个元素，则需要获取父子引用，使用以下函数删除该元素：

parent.removeChild(child);

检查此链接以获得更好的理解：

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

于 2013-08-22T07:09:08.627 回答