How to remove elements that were fetched using que

Question

his 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");

YEY!

How do I delete these elements? What am I missing? 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(). Just bear in mind that Internet Explorer is not supported.

Edit: Internet Explorer support. If you also wish to make the above code working in IE, just add this piece of code anywhere before in your JS:

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());