使用 JavaScript 从 HTML 表单中删除所有输入标签 [重复]答案

【问题标题】：Delete all input tags from an HTML form with JavaScript [duplicate]使用 JavaScript 从 HTML 表单中删除所有输入标签 [重复]
【发布时间】：2017-03-13 14:23:43
【问题描述】：

我是 JavaScript 新手，我已经尝试了太长时间了。

我制作了这段代码，以删除，不清除或重置来自具有特定名称的表单的所有输入标签。输入字段具有不同的名称，因此我不能使用具有特定名称的输入字段列表。

 <form action="/" method="get" name="aForm">
  A: <input type="text" name="a" value="a"><br>
  B: <input type="text" name="b" value="b"><br>
  C: <input type="text" name="c" value="c"><br>
  D: <input type="text" name="d" value="d"><br>
</form> 

<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
  var aForm = document.forms["aForm"].getElementsByTagName("input");
  var len = aForm.length;
  console.log("Form has "+len+" input fields.");

  for (var i = 0; i < len; i++)
   {
     aForm[i].remove();
     console.log("Removed number: "+i);
   }

  console.log("After the for loop: "+ aForm.length);
}
</script>

这很好地删除了第一个和第三个输入字段，这已经让我感到困惑了。但随后突然中断TypeError: aForm[i] is undefined。

我确实有使用多种不同语言的经验，但这让我感到困惑。我觉得我无法使用 for 循环。

【问题讨论】：

标签： javascript html forms for-loop

【解决方案1】：

getElementsByTagName 返回一个 live 列表。

当您从 DOM 中移除元素时，您也将其从列表中移除。这会导致所有其他元素在列表中向下移动一个位置。

要解决这个问题，您可以：

继续删除第一个项目，直到将它们全部删除

while (aForm[0]) {
    aForm[0].remove();
}

向后循环列表

for (var i = len-1; i >= 0; i--) {
    aForm[i].remove();
}

【讨论】：

【解决方案2】：

尝试以下方法：

function myFunction()
{
  var aForm = document.forms["aForm"].getElementsByTagName("input");
  var len = aForm.length;
  console.log("Form has "+len+" input fields.");
  var i=0;
  while (aForm.length){
    aForm[0].remove();
    console.log("Removed number: "+i);
    i++;
  }

  console.log("After the for loop: "+ aForm.length);
}

<form action="/" method="get" name="aForm">
  A: <input type="text" name="a" value="a"/><br>
  B: <input type="text" name="b" value="b"/><br>
  C: <input type="text" name="c" value="c"/><br>
  D: <input type="text" name="d" value="d"/><br>
</form>
<button onclick="myFunction()">Try it</button>

【讨论】：