How to remove elements that were fetched using querySelectorAll?

javascript element selectors-api
Randy Hall picture Randy Hall · Oct 29, 2012 · Viewed 48.6k times · Source

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

jAndy picture jAndy · Oct 29, 2012

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.

Related questions

Deleting array elements in JavaScript - delete vs splice

What is the difference between using the delete operator on the array element as opposed to using the Array.splice method? For example: myArray = ['a', 'b', 'c', 'd']; delete myArray[1]; // or myArray.splice (1, 1); Why even have the splice method if …

Read More
How can I check if an element exists in the visible DOM?

How do you test an element for existence without the use of the getElementById method? I have set up a live demo for reference. I will also print the code on here as well: <!DOCTYPE html> <html&…

Read More
Getting DOM element value using pure JavaScript

Is there any difference between these solutions? Solution 1: ...and Solution 2: function doSomething(id) { var value = document.getElementById(id).value; console.log(value); //... } <input id="theId" value="test" onclick="doSomething(this.id)" />

Read More