Question

What I would like to do is click on an image link inside a div and have the div that contains the div that contains my image link disappear (display:none;). Right now my html has the following structure

<div id="one">
    <div>
        Words Words Words
        <a href="javascript:void(0);" onClick="hideDiv('#one')";>
            <img src="foo.jpg" />
        </a>
    </div>
</div>
<div id="two">
    <div>
        Words Words Words
        <a href="javascript:void(0);" onClick="hideDiv('#two')";>
            <img src="foo.jpg" />
        </a>
    </div>
</div>

The hideDiv() function looks like this:

function hideDiv(divId) {
    $(divId).hide();
}

This works well enough but can be a bit cumbersome. What I would prefer would be to not need to explicitly define, by id, which div I want to hide and for the Javascript to catch the link click event and do something like $(this_link.parent_div.parent.div).hide();. Unfortunately, I don’t know how to do that, but I’m sure there must be a way!

Answer 1

Instead of having an id to containing div, have a common class and then use this.

HTML

<div class="container">
    <div>
        Words Words Words
        <a href="javascript:void(0);">
            <img src="foo.jpg" />
        </a>
    </div>
</div>

Js

$('a').click(function(){
      $(this).closest('.container').hide();
});

If you don’t want to add any class then you can simply try this.

$('a').click(function(){
      $(this).parent().parent().hide();
});

Working demo – http://jsfiddle.net/ShankarSangoli/MvkEa/

References:

• .closest() – http://api.jquery.com/closest/
• .parent() – http://api.jquery.com/parent/