时间戳

首页 > 解决方案 > 使用循环从父节点中删除元素

javascript - 使用循环从父节点中删除元素

问题描述

今天我要解决这个难题，所以我有一组 html 元素（例如 3 个输入），我想从 dom 中删除每一个元素。所以我必须对它们进行迭代循环，但我也不应该增加值，因为它会跳过所有其他元素，这意味着我只能删除数组的第一个元素直到它存在，所以对于这个任务，我使用这个代码

 while(inputs[0]) {
    inputs[0].parentNode.removeChild(inputs[0]);
 }

这完美地工作并删除了所有元素。但是for...of循环呢？它还获取数组的每个值，如果我每次从数组中获取元素时都删除第一个输入怎么办？像这样：

for(input of inputs){
    inputs[0].parentNode.removeChild(inputs[0]);
}

我也试过这个，在 3 个输入中它留下了第三个（没有删除它）所以我想知道为什么？有人可以告诉我它是如何错过第三个的吗？（图形解释将是最好的）

谢谢你

标签： javascriptarraysloopsecmascript-6

解决方案

在第一次迭代中，迭代器的位置为零，共有三个元素。你删除一个。

 v
 0 1 2

在第二次迭代中，迭代器位于位置一，有两个元素。你删除一个。

   v
 0 1

在第三次迭代时，迭代停止，因为只有一个元素，并且索引在三，所以它在数组之外。没有进行删除操作。

      v
 0

这里的主要问题/优势是nodes实时收藏。如果它不是实时的（例如，如果您使用querySelectorAll），那么第二个版本将起作用：

 //     v declare variables!
 for(const input of document.querySelectorAll("input"))
   input.remove(); // < remove is way easier

推荐阅读