Help with jQuery :last selector

Question

I have a structure like so.

<ul id="comment_list">
 <li><ul><li></li></ul></li>
 <li></li>
 <li></li>
</ul>

For brevity I left out the nested ul's in each li tag... I'm trying to remove the last li in the comment_list, what's happening is it is getting removed along with the last li in each nested ul. How do I stop that?

I have this:

$("#comment_list li:last-child").remove();

Answer 1

':last-child' is different to ':last'

':last-child' is a group selector that will select multiple children that match the selector inside the parent. ':last' will only ever pick 'the last' element that matches the selector.

Try this code instead:

$("div#comment_list li:last").remove();

Hope that helps you bro!

W.

Answer 2

Try $("#comment_list > li:last-child").remove();

Answer 3

Try $("#comment_list > li:last-child").remove();