使用DOM方法删除图像元素

Question

谁能解释为什么remove（）方法无法按我预期的那样工作。 我想从文档中删除所有img元素。 循环浏览文档并删除所有图像，这就是我想要的，但是这仅删除了2张图像，为什么？ 这是代码JSBIN

的HTML

<img src="http://www.lorempixel.com/50/50" alt="pic">
<img src="http://www.lorempixel.com/50/50/animals" alt="pic">
<img src="http://www.lorempixel.com/50/50/city" alt="pic">

JS

var imgElements = document.getElementsByTagName("img"); // HTMLCollection

for(var i=0; i<imgElements.length; i++) {
  var img = imgElements[i];
  img.remove();
}

Answer 1

我担心该代码有两件事：

1. remove是一个相对较新的DOM方法，没有得到很好的支持。 为了获得更好的支持，请使用img.parentNode.removeChild(img);

2. getElementsByTagName返回活动的 NodeList ，因此，当您从列表的开头删除元素时，所有其他元素都向上移动。 因此，如果列表中有5个条目，并且删除了i=0元素，所有其他元素都移动了，那么现在有了一个新的 i=0元素（长度为4 ）。 您的循环将继续到i=1 ，因此不会处理i=0处的元素（以前是i=1 ）。

   对于非活动的NodeList ，请使用querySelectorAll('tagname') （或仅向后循环遍历列表，从末尾删除）。 或使用Array.prototype.slice将NodeList转换为数组。

   所有现代浏览器以及IE8都支持querySelectorAll 。

这是使用querySelectorAll的示例：

var imgElements = document.querySelectorAll("img"); // HTMLCollection
for(var i=0; i<imgElements.length; i++) {
  var img = imgElements[i];
  img.parentNode.removeChild(img);
}

或者只是倒数：

var imgElements = document.getElementsByTagName("img"); // HTMLCollection
for(var i=imgElements.length-1; i>=0; i--) {
  var img = imgElements[i];
  img.parentNode.removeChild(img);
}

或使用Array.prototype.slice ：

var imgElements = Array.prototype.slice.call(document.getElementsByTagName("img"));
for(var i=0; i<imgElements.length; i++) {
  var img = imgElements[i];
  img.parentNode.removeChild(img);
}