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