Question

我有两个文本框和两个名为add and remove的按钮。要求是添加更多框以及当前框。我以某种方式设法添加盒子，但删除盒子的要求不起作用。请帮助解释为什么此代码不起作用，如果可能的话，建议一个有效的解决方案。

function addFunction(){
  var element = document.createElement("input");
  var parent = document.getElementById("form1");
  parent.appendChild(element);
}

function removeFunction(){
  var child = document.getElementsByTagName("input");
  var parent = document.getElementById("form1");

  for (var i = 0; i > child.length; i++) {
    parent.removeChild(child[i]);
  };
}

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <form id="form1" style="margin-left: 40%; margin-top: 100px;">
      <input type="text" id="one"><br><br><br>
      <input type="text" id="two"><br>
      <p id ="demo"> </p>
    </form>
    <button style="margin-left: 40%;" type="button" value="ADD" id="addButton" onclick="addFunction()">ADD</button>
    <button style="margin-left:50px;" type="button" value="REMOVE" id="removeButton" onclick="removeFunction()">REMOVE</button>
  </body>
</html>

Answer 1

for (var i = 0; i <  child.length; i++) {
        parent.removeChild(child[i]);
    };

你的for循环中的条件有误。您的i在开始时始终为0，并且小于具有节点元素的数组的长度，因此循环无法启动。附：并且你之前不需要var i

Answer 2

你的for-Loop错了：

        for (var i = 0; i > child.length; i++) {
            parent.removeChild(child[i]);
        };

您需要更改＆＃34;＆gt;＆＃34;到＆＃34;＆lt;＆＃34;

Answer 3

替换你的＆gt; for循环中的条件为＆lt;。您希望执行for循环直到它达到child.length。

使用javascript添加和删除框

3 个答案: