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.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>

See the NodeList.prototype.forEach() and Element.remove()

Internet Explorer support. IE does not support the forEach on the NodeList and IE also doesn't support remove method on Element objects. Hence, if you also wish to run the above code in the IE, just add the following lines at the beginning of your JavaScript code, and to remove an element use the Node.removeChild instead (or use the 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>