使用javascript添加和删除框

我有两个文本框和两个名为add和remove的按钮。要求是在当前框中添加更多框。我以某种方式设法添加框，但删除框的要求不起作用。请帮助解释为什么此代码无法正常工作，并且如果可能的话，请提供可行的解决方案使用javascript添加和删除框

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>

来源

2017-04-20 Daredevil

你需要克隆'node'，然后再追加同样的https://developer.mozilla.org/en/docs/Web/API/Node/cloneNode – gurvinder372

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

你已经在你的循环得到了错误的条件。你的i在开始时总是0，并且小于包含节点元素的数组的长度，所以循环无法启动。 P.s.你不需要var i它

来源

2017-04-20 08:01:49 Brissy

我真是太笨了..感谢你的解释和帮助... – Daredevil

你的for循环是错误之前：

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

您需要更改“>”为“<”

来源

2017-04-20 08:02:02 kaljak

是的..现在它的工作..我是如此愚蠢..感谢您的帮助... – Daredevil

更换你>条件的for循环与<。您希望执行for循环，直到达到child.length。

来源

2017-04-20 08:04:47 Felix

是的..现在它的工作..我是如此愚蠢..感谢您的帮助... – Daredevil

Vote如果这对您有用，请将其标记为已接受的答案。 – Felix

是的，我做到了，但它的说法是，我的最高票数已录制，但由于我的名声不到15位，所以不会公开显示。 – Daredevil

使用javascript添加和删除框

回答

相关问题