使用JavaScript从HTML表单中删除所有输入标记

我是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]未定义

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

getElementsByTagName返回一个实时列表

从DOM中删除元素时，也会从列表中删除它。这会导致其他元素在列表中向下移动一个位置

要解决此问题，您可以：

继续删除第一项，直到将其全部删除 将列表向后循环 getElementsByTagName返回一个实时列表

从DOM中删除元素时，也会从列表中删除它。这会导致其他元素在列表中向下移动一个位置

要解决此问题，您可以：

继续删除第一项，直到将其全部删除 将列表向后循环 请尝试以下操作：

函数myFunction { var aForm=document.forms[aForm].getElementsByTagNameinput； var len=形式长度； console.logForm有+len+输入字段。； var i=0； 而形式长度{ A窗体[0]。删除； console.log删除编号：+i； i++； } for循环后的console.log:+aForm.length； } A: B: C: D: 试试看试试下面的方法：

函数myFunction { var aForm=document.forms[aForm].getElementsByTagNameinput； var len=形式长度； console.logForm有+len+输入字段。； var i=0； 而形式长度{ A窗体[0]。删除； console.log删除编号：+i； i++； } for循环后的console.log:+aForm.length； } A: B: C: D: 试试看

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

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