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?

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 04 '23 at 05:16

score 91 · Accepted Answer · answered Oct 29 '12 at 16:35

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.

answered Oct 29 '12 at 16:35

jAndy

231,737
57
305
359

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 '17 at 04:02
6

Well, you can simply call `elementsList[ 0 ].remove();` in todays DOM API. – jAndy Feb 01 '17 at 13:34

Ivan Sivak · Answer 2 · 2021-08-31T14:49:25.263

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>

Simon · Answer 3 · 2019-01-26T13:53:42.000

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

edited Jan 26 '19 at 13:53

answered Jan 24 '19 at 09:20

Simon

2,686
2
31
43

`document.querySelectorAll('.someselector').forEach(el => el.remove());` This line works amazing, thanks! – JaMondo Dec 27 '21 at 21:04

score 1 · Answer 4 · edited Jan 16 '23 at 12:05

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

How to remove elements that were fetched using querySelectorAll?

4 Answers4

Linked