Question

我有一个容器div，其中包含一些文本和多个div，它们的类均为“ test”，而我正尝试使用纯JavaScript删除所有“ test”类的div。

当前，我有一个变量，其中包含所有经过迭代以删除每个div的“ test”类的div。

var divsToRemove = document.getElementsByClassName("test");
for (var i = 0; i < divsToRemove.length; i++) {
  divsToRemove[i].remove();
}

<div id="container">
  <p>This text should stay</p>
  <div class="test">
    <p>Testing 1</p>
  </div>
  <div class="test">
    <p>Testing 2</p>
  </div>
  <div class="test">
    <p>Testing 3</p>
  </div>
  <div class="test">
    <p>Testing 4</p>
  </div>
</div>

我希望所有具有“ test”类的div都将被删除，但是只有一部分已被此代码删除

Answer 1

在删除元素时，它们的索引会发生变化，因此从末尾开始一直到最前面：

var divsToRemove = document.getElementsByClassName("test");
for (var i = divsToRemove.length-1; i >= 0; i--) {
  divsToRemove[i].remove();
}

<div id="container">
  <p>This text should stay</p>
  <div class="test">
    <p>Testing 1</p>
  </div>
  <div class="test">
    <p>Testing 2</p>
  </div>
  <div class="test">
    <p>Testing 3</p>
  </div>
  <div class="test">
    <p>Testing 4</p>
  </div>
</div>

Answer 2

getElementsByClassName()返回 实时HTMLCollection ，您可以尝试使用querySelectorAll()返回静态（ 非实时 ） NodeList 。

var divsToRemove = document.querySelectorAll(".test");
for (var i = 0; i < 4; i++) {
    divsToRemove[i].remove();
}

<div id="container">
   <p>This text should stay</p>
   <div class="test"><p>Testing 1</p></div>
   <div class="test"><p>Testing 2</p></div>
   <div class="test"><p>Testing 3</p></div>
   <div class="test"><p>Testing 4</p></div>
</div>

如何从HTML页面中删除具有相同类的多个div

2 个答案: