How to remove the last DIV using jQuery?

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 "开发者_Go百科POST" div in the "container1" div.

Thanks

$('#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.

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

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.

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

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

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

will remove last div and so on till all div get removed.

This fades it out and also removes it from the DOM

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