jQuery | Click child, hides parent

Question

Hey, I have a list of using ul and li:

<span class="important">Show/Hide</span>

<div id="important" class="hidden">
    <ul class="sub">
     <li>
            Value one
        </li>
        <li class="child">
            <img src="../img/close.png" />
        </li>
    </ul>
</div>

$(".important").click(function () {
  $("#important").slideToggle("fast");
});

When the child (class="child") is clicked on, it should slide up the div (id="important"), however, there are other lists that have different IDs, I want the div to slide up when the child is clicked

I did this:

$(".child").click(function () {
  $(".child < div").slideUp("fast");
});

I have no idea how to make it work, I've done other combinations, can't seem to do it.

Answer 1

You can do it using .closest(), like this

$(".child").click(function() {
  $(this).closest("div").slideUp();
});

This goes from the .child you clicked on up the the neatest <div> ancestor and slides it up. If you may have other divs between the child and parent, then I suggest giving the <div> you do want closed a class, and changing the closest call to look for that specific <div>, like this:

$(".child").click(function() {
  $(this).closest("div.classToClose").slideUp();
});

Answer 2

I think you need the ":parent" selector, in your case it would be:

$(".child:parent").slideUp("fast");

For other selectors, please have a look at: http://api.jquery.com/category/selectors/

Answer 3

I would use the parent() selector, this is the best (my opinion) way to make sth like this :)