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

admin管理员组

文章数量:1391989

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

Share Improve this question Follow edited May 25, 2021 at 19:49 guzmonne 2,55011 gold badge1818 silver badges2424 bronze badges asked May 25, 2021 at 15:24 Rakesh SutharRakesh Suthar 12988 bronze badges 1

• "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

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

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

本文标签：