title: Hiding parent divs in Jquery
body: <p>I am having a simple div structure ( see below ). All I am trying to do is when the div id "interviewer-Button" is clicked the following div's should appear and when the div id "elt" is clicked divs from id "parent0" till the end should hide.</p>
  
  <p>The display part works fine. However, when I try to hide, it just does NOT hide. When i click on the div id "elt" the alert message "hh" (see below) gets thrown!! Weird. Any help on how to hide this?</p>
  
  <pre><code>&lt;div id = "interviewer-Button"&gt;
     Interviewer
     &lt;div id = "parent0"&gt;
           Viv
            &lt;div id = "parent1"&gt;
                  Parent
                  &lt;div id = "elt"&gt;
                       Close
                   &lt;/div&gt;
  
            &lt;/div&gt;                                        
      &lt;/div&gt;                                                              
  &lt;/div&gt;    
  
  
  &lt;script&gt;
  $(document).ready(function() {
      $("#parent0").hide();   
      $("#interviewer-Button").click(function() { alert("hh");$("#parent0").show(); });
      $("#elt").click( function () {
              $(this).parent().parent().hide();
           });                
       });
  &lt;/script&gt;
  </code></pre>