Question

For some reason, I can’t get jQuery to do what I want it to do.

What I need is for the container div to disappear when one of its children is clicked.

Here’s example HTML

<div id="container">
 <a href="link">
  <div id="child1">
   When this is clicked, #container disappears,
   including everything contained inside...
  </div>
 </a>

 <a href="link">
  <div id="child2">
   ...or when this one is clicked
  </div>
 </a>
</div>

Here’s what I’ve tried.

$("#child1").click(function () { 
  $(#container).hide(); 
});

and

$("#child1").click(function () { 
  $(#container).fadeOut("fast"); 
});

Thanks in advance.

Answer 1

With this code, no matter how many elements you have in your #container div, clicking on them will hide the whole div :

$("#container").children().bind("click", function(e){
    e.preventDefault();
   $("#container").fadeOut();
});

See here : http://jsfiddle.net/pioul/Bd9Dc/