Hiding parent div

Hiding parent div

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 show and when the div id "elt" is clicked, divs from id "parent0" till the end should hide.

The display part works fine. However, when I try to hide, it just does NOT hide. When i click on the div id "elt" it hides for a moment and weirdly the alert message "hh" (see below), gets thrown!! Weird. Any help on how to hide this?
<div id = "interviewer-Button">
   Interviewer
   <div id = "parent0">
         Viv
          <div id = "parent1">
                Parent
                <div id = "elt">
                     Close
                 </div>
                       
          </div>                                       
    </div>                                                             
</div>   

<script>
$(document).ready(function() {
   $("#parent0").hide();   
   $("#interviewer-Button").click(function() { alert("hh");$("#parent0").show(); });
   $("#elt").click( function () {
            $(this).parent().parent().hide();
         });              
     });
</script>