How to remove the last DIV using jQuery?

Question

Hi

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

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 2

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

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

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