jQuery select the parent of a div

Question

I have this html:

    <div class="vt ddsitem">
        <a href="url"><img class="pt" id="xyz1" src="url"></a>
        <div>
            <img class="updown" src="images/updown.gif">
            <a href="url"><img class="bin" src="images/bin.gif"></a>
        </div>
    </div>
   <div class="vt ddsitem">
        <a href="url"><img class="pt" id="xyz2" src="url"></a>
        <div>
            <img class="updown" src="images/updown.gif">
            <a href="url"><img class="bin" src="images/bin.gif"></a>
        </div>
    </div>

And i want to remove the vt ddsitem div in which in the image xyz2 is a child.

Tried a lot of things, like:

$('#xyz2').parent().parent().remove(); 

but none of them did the trick.

Anyone got a clue?

Answer 1

.closest() is a good method to do what you're after:

$('#xyz2').closest('.ddsitem').remove(); 

Though, what you have should work, if it's running in a document.ready handler, like this:

$(function() {
  $('#xyz2').parent().parent().remove(); 
});

You can see it in action here, the same document.ready wrapper goes for the .closest() method above...the elements need to be ready and in the DOM before we can find them with a selector.

Answer 2

Your code seems to be ok.

Are you using any jQuery plugin? If you do, it must be wrapping your div or transforming your code. Try to use Firebug to view what happening.