My query is simple :

How to remove all elements except last one with same document.querySelectorAll(".someClass") using only javascript without jQuery.

I can do it with jQuery with only one line like this:

$('.someClass').not(':last(2)').remove();

But I want to do it with pure JavaScript; how can I do that? Any idea?

I tried this code :

var lists = document.querySelectorAll(".someClass");
for(var i = 1; i < lists.length; i++) {
  lists[i].parentElement.removeChild(lists[i]);
}

But it removes all elements except the first one. But I want to keep the last one.

My query is simple :

How to remove all elements except last one with same document.querySelectorAll(".someClass") using only javascript without jQuery.

I can do it with jQuery with only one line like this:

$('.someClass').not(':last(2)').remove();

But I want to do it with pure JavaScript; how can I do that? Any idea?

I tried this code :

var lists = document.querySelectorAll(".someClass");
for(var i = 1; i < lists.length; i++) {
  lists[i].parentElement.removeChild(lists[i]);
}

But it removes all elements except the first one. But I want to keep the last one.

• javascript
• jquery

• "pure JavaScript:" => "with the DOM" (it's pure JavaScript either way). (Useful to know that for searching.) – T.J. Crowder Commented May 25, 2021 at 15:28

6 Answers 6

This will remove all but the last element from your nodeList

EDIT:

const elems = Array.from(document.querySelectorAll(".someClass"))
elems.pop()
elems.map(node => node.parentNode.removeChild(node))

var lists = document.querySelectorAll(".someClass");
for(var i = 0; i < lists.length -1; i++) {
  lists[i].parentElement.removeChild(lists[i]);
}

Try using this.

var lists = document.querySelectorAll(".someClass");
for(var i = 1; i < lists.length; i++) {
  if (i !== lists.length - 1) lists[i].parentElement.removeChild(lists[i]);
}

You can perform the above action on every item in the array except for the last one (the last index is array.length - 1 since the first index is 0.

You were close:

let endIndex = 1 // how many you want to delete
var lists = document.querySelectorAll(".someClass");
for(var i = 0; i < lists.length - 1 - endIndex; i++) {
  lists[i].parentElement.removeChild(lists[i]);
}

Stop just before the last one:

var lists = document.querySelectorAll(".someClass");
for(var i = 1; i < lists.length - 1; i++) {
//                             ^^^^−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−
    lists[i].parentElement.removeChild(lists[i]);
}

Or alternatively, in all vaguely-modern browsers:

const lists = Array.prototype.slice.call(
    document.querySelectorAll(".someClass"),
    0, -1
);
for (const list of lists) {
    list.remove();
}

That uses the slice method from Array.prototype to grab all of the entries from the NodeList returned by querySelectorAll except the last one, then loops over that result removing those elements.

Try with this:

$("#parent_id").children(":not(#id_n)").remove();