0

我只是想用一个简单的 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 中删除，但第二个图像元素会保留在原位。我真的不明白为什么。

4

4 回答 4

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--) ...
于 2019-07-29T11:38:43.490 回答
0

你正在使用removeChild()，不是remove()。您的问题的解决方案是：

let imgs = document.getElementById('box').children();
imgs.forEach(img => img.remove());
于 2019-07-29T11:42:43.113 回答
0

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

查看代码示例：

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>

于 2019-07-29T11:39:14.750 回答
0

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

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

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>

于 2019-07-29T11:41:01.003 回答