删除HTML集合中的所有元素

Remove all elements in the HTML Collection

本文关键字：元素 HTML 集合 删除      更新时间：2023-09-26

我有以下代码。当我试图删除所有的图像，只有3被删除。感觉好奇怪。这是什么原因呢?

<script type="text/javascript">
  function c() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
      images[i].parentNode.removeChild(images[i]) //or images[i].remove()
    }
  }
</script>
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<input id="clickMe" type="button" value="Delete Images" onclick="c()" />

使用while循环

<script type="text/javascript">
  function c() {
    var images = document.getElementsByTagName('img');
    var counter = 0;
    while(images.length){
      images[counter].parentNode.removeChild(images[counter])
    }
  }
</script>
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<input id="clickMe" type="button" value="Delete Images" onclick="c()" />

你需要反向循环。如果向前循环，当您删除一个元素时，您将修改剩余元素的索引。所以，这样做:

for (var i = images.length - 1; i >= 0; i--) {
  // Remove first element (at [0]) repeatedly
  images[0].parentNode.removeChild(images[0]);
}


  function c() {
    var images = document.getElementsByTagName('img');
    for (var i = images.length-1; i > -1; i--) {
      images[i].parentNode.removeChild(images[i]) //or images[i].remove()
    }
  }
  function c1() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
      images[i].parentNode.removeChild(images[i]) //or images[i].remove();
      //you can also decrement i by one with each delete, more than one way to skin a cat as they say.
      i--;
    }
  }
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<img src="http://unsplash.it/200/300/" />
<input id="clickMe" type="button" value="Delete Images" onclick="c1()" />

为了配合我的评论，你也可以向后迭代，以避免每次迭代都要调整i。

  for (var i = images.length-1; i >-1;  i--) {
      images[i].parentNode.removeChild(images[i]) //or images[i].remove()
    }
相关文章：