CSS selector last-child vs last

Question

I have a snippet here:

 $('#add').click(function(){ $('#list').after("<div class='container-editor'><p>some text inside</p><p>some text inside</p><p>some text inside</p></div>"); }); $('#remove').click(function(){ $('.container-editor:last-child').remove(); }); 

 .container-editor { padding: .5em 2em 1.5em; margin-top: 10px; box-shadow: 1px 0 10px 1px rgba(0,0,0,0.3); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='list'> <div class='container-editor'> <p>some text inside</p> <p>some text inside</p> <p>some text inside</p> </div> </div> <br><br> <button id='add'>add</button>&nbsp;&nbsp;<button id='remove'>remove</button> 

By clicking on the add button, a new div is appended to the end. By clicking on the remove button, the last '.container-editor' element is removed.

However, the remove button in the JsFiddle linked above only works once.

If I change the following code:

$('.container-editor:last-child').remove();

to

$('.container-editor:last').remove();

Then, the remove button works multiple times.

My questions is why does the :last-child selector stops working after an element is removed? This effect is not stated in the documentation

---

Update: Thanks for all your inputs. Yes, I made a mistake using after instead of insert . But still, thanks to @TJ Crowder, it is good to know that:

.container-editor:last-child means select the last child of class container-editor in their parent element.

:last doesn't care about parents, it will just select the last one.

I added this new snippet to illustrate the unique part about .container-editor:last-child

 $('#remove').click(function(){ $('.container-editor:last-child').remove(); }); 

 .container-editor { padding: .5em 2em 1.5em; margin-top: 10px; box-shadow: 1px 0 10px 1px rgba(0,0,0,0.3); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class='container-editor'> <p>some text inside</p> <p>some text inside</p> <p>some text inside</p> </div> <div class='container-editor'> <p>some text inside</p> <p>some text inside</p> <p>some text inside</p> </div> <div class='container-editor'> <p>some text inside</p> <p>some text inside</p> <p>some text inside</p> </div> <br><br> <button id='remove'>remove</button> 

The remove button won't work in this case since there is no parent for all of the .container-editor elements.

Answer 1

Because you are not adding the new elements to #list , so the first editor is the only editor which satisfies the last-child selector.

Instead of using after use .append() to add the elements like

 $('#add').click(function() { $('#list').append("<div class='container-editor'><p>some text inside</p><p>some text inside</p><p>some text inside</p></div>"); }); $('#remove').click(function() { $('.container-editor:last-child').remove(); }); 

 .container-editor { padding: .5em 2em 1.5em; margin-top: 10px; box-shadow: 1px 0 10px 1px rgba(0, 0, 0, 0.3); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id='list'> <div class='container-editor'> <p>some text inside</p> <p>some text inside</p> <p>some text inside</p> </div> </div> <br> <br> <button id='add'>add</button>&nbsp;&nbsp; <button id='remove'>remove</button> 

Answer 2

It is because first it was inside #list div and you're specifying its' last child so you need to append it inside #list div and then you need to apply.

$('.container-editor:last-child').remove();

You can use .append()

$('#list').append("<div class='container-editor'>
  <p>some text inside</p><p>some text inside</p><p>some text inside</p></div>")

Instead of

using .after()

Demo

Answer 3

You're adding the elements after #list , not inside it. So the first time you call remove , it works, because there is a .container-editor that is also the :last-child of its parent (the original one). But the ones you've added with the Add button are never the :last-child in their parent, they're followed by a couple of br elements. (Remember that .container-editor:last-child means "elements that have the class container-editor and are the last child in their parent element.")

In contrast, the jQuery :last extension doesn't care about whether what matches is the last child , just that it be the last one in the list.

You probably meant to insert those .container-editor elements inside #list , not after it. Change

$('#list').after(...

to

$('#list').append(...

Updated Fiddle