使用 JavaScript 删除具有特定类的所有元素

作者

使用 JavaScript 删除具有特定类的所有元素

Remove all elements with specific Class using JavaScript

要删除具有特定类的所有元素：

  1. 使用该document.querySelectorAll()方法按类选择元素。
  2. 使用该forEach()方法遍历集合。
  3. 对每个元素调用该remove()方法以将其从 DOM 中删除。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.remove();
});

我们使用document.querySelectorAllbox方法来选择DOM 中
所有类为 的元素。

该querySelectorAll方法返回 a NodeList，因此我们可以使用
NodeList.forEach
方法迭代元素集合。

getElementsByClassName 与 querySelectorAll

如果使用
document.getElementsByClassName
方法，则必须在调用该
forEach()方法之前将结果转换为数组。

索引.js
const boxes = Array.from(document.getElementsByClassName('box'));

boxes.forEach(box => {
  box.remove();
});

请注意，该querySelectorAll方法将选择器作为参数。在对该方法的调用中，我们在类名前加上了一个点.box。

索引.js
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.remove();
});

而该getElementsByClassName方法将类名作为参数。

我们传递给方法的函数forEach()被集合中的每个元素调用。

在每次迭代中，我们使用
Element.remove()
方法从 DOM 中移除元素。

请注意，删除 DOM 元素也会删除其所有子元素。

删除所有具有特定类的元素而不删除它们的子元素

如果您需要删除具有特定类名的元素而不删除其子元素，请使用该replaceWith()方法。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="box">
      <span>Child 1</span>
    </div>
    <div class="box">
      <span>Child 2</span>
    </div>
    <div class="box">
      <span>Child 3</span>
    </div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const boxes = document.querySelectorAll('.box');

boxes.forEach(box => {
  box.replaceWith(...box.childNodes);
});

删除带有类的元素而不删除子元素

要删除元素而不删除其子元素，我们必须用其子元素替换该元素。

childNodes属性返回一个
包含子元素、文本和注释的。NodeList

The replaceWith method takes multiple, comma-separated elements with which to
replace the element it was called on, so we had to use the spread syntax (…)
to unpack the values from the NodeList in the call to the method.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: