89

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?

1
  • I don't think any of these answers get at what the OP is asking. All answers are great answers for removing the element from the DOM, but not the list of elements returned from querySelectAll(). If you run elements[0].parentNode.removeChild(elements[0]), element[0] is removed from the DOM but not from elements. The OP (and myself) is looking for a way to do something like elements.slice(1) (if elements was an array rather than a NodeListOf). Is there a way to remove elements from a NodeListOf object or do we have to call querySelectorAll() after calling remove() on the element?
    – gib65
    May 4 at 5:16

4 Answers 4

91

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.

2
  • 1
    @jAndy thanks for the answer. I need to remove the first node of the NodeList. Is there any way to directly remove the first node?
    – Raghvendra
    Jan 31, 2017 at 4:02
  • 6
    Well, you can simply call elementsList[ 0 ].remove(); in todays DOM API.
    – jAndy
    Feb 1, 2017 at 13:34
87

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>

0
29

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());
1
  • document.querySelectorAll('.someselector').forEach(el => el.remove()); This line works amazing, thanks!
    – JaMondo
    Dec 27, 2021 at 21:04
1

We can remove the element from querySelectorall() by using remove() function. make sure remove function can only be used in modern browser.

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

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

reference - https://bbbootstrap.com/code/remove-elements-that-were-fetched-using-queryselectorall-10186399

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.