tengo algunos elementos que contienen un par de elementos. Quiero que cuando haga clic en el elemento secundario, el padre del elemento desaparezca con todos sus elementos anidados (nested_parent y nested_parent1 y el hijo).
.parent{ margin-top: 10px; width: 125px; height: 125px; background-color: red; display: flex; justify-content: center; align-items: center; } .nested_parent { width: 100px; height: 100px; background-color: aqua; position: absolute; display: flex; justify-content: center; align-items: center; } .nested_parent1 { width: 75px; height: 75px; background-color: blueviolet; position: absolute; display: flex; justify-content: center; align-items: center; } .child { width: 50px; height: 50px; background-color: beige; cursor: pointer; } <div class="parent"> <span class="nested_parent"> <span class="nested_parent1"> <i class="child"></i> </span> </span> </div> <div class="parent"> <span class="nested_parent"> <span class="nested_parent1"> <i class="child"></i> </span> </span> </div> <div class="parent"> <span class="nested_parent"> <span class="nested_parent1"> <i class="child"></i> </span> </span> </div>Agregue un controlador de clics a los niños:
$('i.child').click(function(){ $(this).parent().parent().hide() }) Cuando hace clic en un hijo, hará que su abuelo se oculte ( .nested_parent ), lo que oculta automáticamente a sus descendientes ( .nested_parent1 y .child ).