How to remove elements that were fetched using querySelectorAll?

Question

This seems like something that would have a quick answer, but I can't find one. Maybe I'm searching the wrong terms? No libraries please, though I don't need cross-browser fallbacks, I'm targeting all the latest versions on this project.

I'm getting some elements:

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

This is working, but how do I now delete these elements? Do I have to loop through them and do the element.parentNode.removeChild(element); thing, or is there a simple function I'm missing?

Answer 1

Yes, you're almost right. .querySelectorAll returns a frozen NodeList. You need to iterate it and do things.

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

Even if you only got one result, you would need to access it via index, like

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

---

If you only want to query for one element, use .querySelector instead. There you just get the node reference without the need to access with an index.

Answer 2

Since the NodeList already supports the forEach you can just use

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

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

See the NodeList.prototype.forEach().

Internet Explorer support. IE does not support forEach on NodeList hence if you also wish to make the above code work in IE, just add this piece of code at the beginning of your JavaScript code:

if (!NodeList.prototype.forEach && Array.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

..and NodeList in IE will suddenly support forEach as well.

Answer 3

Even more concise with Array.from and ChildNode.remove:

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

Ok, just saw NodeList is iterable so it can be done even shorter:

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