Question

I have a div tag, which contains a div tag, which contains a ul tag which then contains many li tags. On of these li tags contains an anchor element, which when clicked causes the outermost div to hide.

for example

<div class="object" id="123">
  <div>
    <ul>
      <li></li>
      <li><a href="#" id="hide">hide outermost div and its child elements</a></li>
    </ul>
  </div>
</div>

<div class="object" id="124">
  <div>
    <ul>
      <li></li>
      <li><a href="#" id="hide">hide outermost div and its child elements</a></li>
    </ul>
  </div>
</div>

on clicking the anchor tag the outermost div must hide along with its child elements.

I reckon i need to use parentNode repeatedly.. but is there a simpler way to directly access the outer most div and hence its id. Help would be appreciated.

Answer 1

Your question is fairly unclear. It almost sounds like you are looking for a generic way of accessing the “outer div”. If that is the case, it doesn’t make sense that you have ids on both your anchor and your outer div. If there’s only ever going to be one “outer div” and one anchor to hide it, all you need is:

$('#hide').click(function(){
    $('#123').hide();
});

If you want a generic way of doing this, you should add classes to both:

<div class="outerDiv" id="123">
    <div>
        <ul>
            <li></li>
            <li><a href="#" class="hider" id="hide">hide outermost div and its child elements</a></li>
        </ul>
    </div>
</div>

and:

$('.hider').click(function(){
    $(this).closest('.outerDiv').hide();
});