CODEWITHSUNDEEP
javascriptjqueryhtml
keybored
keybored

Reputation: 5248

Is there a way to access a containing div from an <a> link in Javascript?

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!

Upvotes: 1

Views: 130

Answers (4)

jrummell
jrummell

Reputation: 43087

Use the parent() method to get an element's parent.

<script type="text/javascript">
function hideDiv(a) {
    $(a).parent().parent().hide();
}
</script>

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

Or, unobtrusively:

<script type="text/javascript">
$(document).ready(function(){
  $(".hideable a").click(function(){
    $(this).parents(".hidable").hide()
  });
});
</script>

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

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

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:

Upvotes: 4

asawyer
asawyer

Reputation: 17808

I think you want .parent()

http://api.jquery.com/parent/

I have the jquery documentation page up every day, it's an incredible resource for these types of questions.

http://docs.jquery.com/Main_Page

Upvotes: 0

BNL
BNL

Reputation: 7133

An good way to do this is to add a new class to all of the divs that you want to select:

<div id="one" class="linkDiv">

Then do:

$(this).parents('.linkDiv').hide();

This solution doesn't trap you into relying on there always being two levels of divs between your link and the container you wish to hide.

Upvotes: 1

Related Questions