javascript - 使用 JavaScript 从 HTML 表单中删除所有输入标签

标签 javascript html forms for-loop

<分区>

我是 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 循环。

最佳答案

getElementsByTagName 返回一个事件列表。

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

要解决这个问题,您可以:

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

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

向后循环列表

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

关于javascript - 使用 JavaScript 从 HTML 表单中删除所有输入标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42765992/

相关文章:

javascript - 为什么这个 <pre> 标签中没有换行符?

javascript - coffeescript 能否在 Node 运行时执行期间输出 sourcemap(非预编译)?

javascript - 监听来自另一个自定义元素的自定义事件

javascript - 如何将我的整个网页调整到 65%

html - 解析将一些自定义标签列入白名单的 HTML 片段

javascript - 使用 contenteditable div 获取和设置光标位置

javascript - passport.authenticate 回调未被执行

php - 日期时间默认为 1970-01-01

forms - Spring MVC - 部分绑定(bind)到表单时如何不丢失字段值

javascript - 以编程方式提交执行 JS 的表单