Скрытие родительских элементов в Jquery

Question

У меня простая структура div (см. Ниже). Все, что я пытаюсь сделать, это когда при нажатии кнопки div id «интервьюер-кнопка» должны появиться следующие элементы div, а при нажатии кнопки div id «elt» div из id «parent0» до конца должен скрыться.

Дисплей работает нормально. Однако, когда я пытаюсь скрыться, он просто НЕ скрывается. Когда я нажимаю на div id "elt", выдается предупреждение "hh" (см. Ниже) !! Weird. Любая помощь о том, как это скрыть?

<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>

Answer 1

Вам нужно остановить распространение события click в обработчике для внутреннего элемента. Без этого также будет вызван обработчик для родителя. Для получения дополнительной информации см. объект события jQuery .

$("#elt").click( function (e) {
    e.stopPropagation();
    $(this).parent().parent().hide();
});

Answer 2

Вы также можете воспользоваться преимуществами распространения событий и прикрепить только одно событие:

$(function() {
  $("#parent0").hide(); 
  $("#interviewer-Button").on('click', function(e){
    $(this).find('#parent0').toggle(e.target.id !== 'elt');
  });
});

Answer 3

n / aИспользуется комбинация вышеперечисленного. Спасибо обоим участникам за их ответы. большая помощь.

            jQuery(function ($) {
                $('.coffee-strength p span').each(function () {
                    var string = $.trim($(this).text());
                    if(string!="22"){
                        $(this).html('<img src="/images/' + string + '.png" alt="' + string + '" />');
                    }else{
                        $(this).parent().parent().hide();    
                    }
                    });

            });

            </script>