Javascript 本机 .remove() 不适用于 HTMLCollection。 Javascript 错误？答案

【问题标题】：Javascript native .remove() does not work on HTMLCollection. Javascript Bug?Javascript 本机 .remove() 不适用于 HTMLCollection。 Javascript 错误？
【发布时间】：2019-07-29 11:29:19
【问题描述】：

我只是想用一个简单的 for 循环遍历 HTMLCollection（div 内的图像）。我使用children() 方法获取图像，使用item() 方法获取特定图像。尽管控制台向我显示了每个图像元素（我正在记录），但在每个元素上使用 remove() 不起作用。它不会删除所有图像。

我尝试过使用数组索引，removeChild() 方法，但问题相同：所以我猜问题出在 HTMLCollection 容量上？

var imgs = document.getElementByID('box').children;
    for (var i = 0; i < imgs.length; i++) {
        var e = imgs.item(i);
        console.log(e)
        document.getElementByID('box').removeChild(e)
    }
}

HTML 标记：

<div id="box">
    <img src="images/1.jpg" alt="">
    <img src="images/2.jpg" alt="">
    <img src="images/3.jpg" alt="">
</div>

我希望每个元素都会从#box 中删除，但第二个图像元素会保留在原处。我真的不明白为什么。

【问题讨论】：

你使用的是.removeChild()而不是.remove()
getElementById 不是 getElementByID 你会得到“Uncaught TypeError”

标签： javascript htmlcollection

【解决方案1】：

HTMLCollection 不是数组，它是 DOM 元素的实时列表。因此你的循环是这样的：

第一轮：

imgs = 1.jpg, 2.jpg, 3.jpg
removeChild(imgs[0]) removes 1.jpg

第二轮：

imgs = 2.jpg, 3.jpg
removeChild(imgs[1]) removes 3.jpg

第三轮：

imgs = 2.jpg
removeChild(imgs[2]) removes undefined, does nothing

简单的解决方法是反向循环遍历数组：

for (var i = imgs.length-1; i >= 0; i--) ...

【讨论】：

【解决方案2】：

我会遍历div[id="box"] 中的所有childNodes 并相应地删除它们。

查看代码示例：

document.querySelectorAll('#box img')
  .forEach(node => {
    // do some additional checks, if needed
    node.remove();
  });

<div id="box">
  <img src="images/1.jpg" alt="">
  <img src="images/2.jpg" alt="">
  <img src="images/3.jpg" alt="">
</div>

【讨论】：

你能把它标记为答案吗？

【解决方案3】：

您使用的是removeChild()，而不是remove()。您的问题的解决方案是这样的：

let imgs = document.getElementById('box').children();
imgs.forEach(img => img.remove());

【讨论】：

【解决方案4】：

你遇到的第一个问题是document.getElementByID - 正确的方法是.getElementById - 最后是小写的d。

其次，你的循环会错过一些元素。如果您执行for 循环并开始删除元素，那么集合的 length 也会发生变化。会发生什么（在伪表示中）：

loop start

index = 0;
collection = [1, 2, 3];
remove item 0;

index = 1;
collection = [2, 3];
remove item 1;

index = 2;
collection = [2];
remove item 3; //error

您可以反向循环 从结尾到开头，但使用forEach 更容易，它可以保证您遍历初始数组中的每个元素：

document.getElementById("remove").addEventListener("click", removeImages)

function removeImages() {
  var imgs = document.getElementById('box').children;
  
  [...imgs].forEach(img => img.remove());
}

<div id="box">
  <img src="images/1.jpg" alt="">
  <img src="images/2.jpg" alt="">
  <img src="images/3.jpg" alt="">
</div>

<button id="remove">Remove all</button>

【讨论】：