How to remove the last DIV using jQuery?

Question

i have the following format :

<div id="container1">
<div id="post"> blah blah blah </div>
<div id="post"> blah blah blah </div>
<div id="post"> blah blah blah </div>
</div>

<div id="container2">
<div id="post"> blah blah blah </div>
<div id="post"> blah blah blah </div>
<div id="post"> blah blah blah </div>
</div>

I want a jQuery code to remove the last "post" DIV in the "container1" with a fading effect.

Important : the "container1" does not have a specified "post" DIVs number. so the code should just select the last "POST" div in the "container1" div.

Thanks

Answer 1

$('#container1 #post:last').fadeOut() would remove the last div with the ID "post" in "container1".

Also, like Gumbo said, IDs should be unique. However, this jQuery code will still work.

Answer 2

IDs must be unique in a document. So the selector #post will probably not work. But this should work anyway:

$("#container1").children("div[id=post]:last").fadeOut();

Answer 3

instead of .fadeout, you should use .remove to remove the element from the containing div. Fadeout performs the fade transition, however the element still remains in the DOM and will be counted if manipulating the size of the div.

Answer 4

To fine tune the fadeout timing you can use hide instead:

$(document).ready(function() {
        $("#container2 div:last").hide(2000);
    });

Answer 5

$("#container1").children("div[id=post]:last").remove();

将删除最后一个div等等，直到所有div被删除。

Answer 6

This fades it out and also removes it from the DOM

$('#container1 #post:last').fadeOut('slow',function(){
    $(this).remove();
});