如何删除使用querySelectorAll获取的元素？

Question

这似乎是一个很容易回答的问题，但我找不到答案。也许我正在使用错误的术语搜索？请不要使用库，尽管我不需要跨浏览器回退，因为我正在针对此项目的所有最新版本。

我正在获取一些元素：

element = document.querySelectorAll(".someselector");

这个方法能够正常工作，但是现在我该如何删除这些元素呢？我需要循环遍历它们并执行 element.parentNode.removeChild(element); 这个操作吗？还是说有一个简单的函数可以实现这个功能，只是我不知道而已？

- Randy Hall

---

我认为这些答案都没有回答 OP 所问的问题。所有的答案都是从 DOM 中删除元素的好方法，但不是从 querySelectAll() 返回的元素列表中删除元素的好方法。如果你运行 elements[0].parentNode.removeChild(elements[0])，element[0] 将从 DOM 中删除，但不会从 elements 中删除。OP（以及我自己）正在寻找一种像 elements.slice(1) 这样的方法（如果 elements 是一个数组而不是 NodeListOf）。有没有一种方法可以从 NodeListOf 对象中删除元素，或者我们必须在调用元素上的 remove() 后再调用 querySelectorAll()？ - gib65

Answer 1

没错，你差不多就对了。 .querySelectorAll 返回一个冻结的 NodeList。你需要循环遍历它并进行操作。

Array.prototype.forEach.call( element, function( node ) {
    node.parentNode.removeChild( node );
});

即使您只得到一个结果，也需要通过索引访问它，例如：

elements[0].parentNode.removeChild(elements[0]);

如果您只需要查询一个元素，使用 .querySelector。这样，您将获得节点引用而不需要使用索引访问。

---

- jAndy

---

@jAndy 谢谢你的回答。我需要删除 NodeList 的第一个节点。有没有直接删除第一个节点的方法？ - Raghvendra

在今天的DOM API中，您可以简单地调用elementsList[0].remove();。 - jAndy

Answer 2

由于 NodeList 已经支持 forEach，所以您只需使用：

document.querySelectorAll(".someselector").forEach(e => e.remove());

<div>
  <span class="someselector">element 1</span>
  <span class="someselector">element 2</span>
  there shouldn't be any of the above "element" spans after you run the code
</div>

请查阅NodeList.prototype.forEach()和Element.remove()

Internet Explorer支持。IE不支持NodeList上的forEach方法，并且IE也不支持Element对象上的remove方法。因此，如果您还希望在IE中运行上面的代码，请在JavaScript代码前添加以下行，并使用Node.removeChild来删除元素（或使用Element.remove() polyfill）：

if (!NodeList.prototype.forEach && Array.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}
// ..then continue as usual with the forEach
document.querySelectorAll(".someselector").forEach(e => e.parentNode.removeChild(e));

<div>
  <span class="someselector">element 1</span>
  <span class="someselector">element 2</span>
  Should be empty
</div>

- Ivan Sivak

Answer 3

使用 Array.from 和 ChildNode.remove 可以更加简洁：

Array.from(document.querySelectorAll('.someselector')).forEach(el => el.remove());

好的，刚刚发现NodeList是可迭代的，所以它甚至可以更短：

document.querySelectorAll('.someselector').forEach(el => el.remove());

- Simon

---

document.querySelectorAll('.someselector').forEach(el => el.remove()); 这行代码太棒了，谢谢！ - JaMondo

Answer 4

我们可以使用remove()函数从querySelectorAll()中删除元素。请确保remove函数仅可在现代浏览器中使用。

// Fetch the elements to remove
const elements = document.querySelectorAll('.class-name');

// Iterate through the elements and remove them
elements.forEach(element => {
  element.remove();
});

参考文献 - https://bbbootstrap.com/code/remove-elements-that-were-fetched-using-queryselectorall-10186399

这篇文章讨论了如何使用JavaScript中的querySelectorAll()方法来获取HTML元素，并演示了如何使用remove()函数删除选定元素。此外，还提供了其他一些有用的技巧和建议，以帮助您更好地掌握这个主题。

- Ask SNB