i have some elements that contain a couple of elements. I want when I click on the child element, the parent of the element disappears with all its nested elements (nested_parent and the nested_parent1 and the child) .
.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>Add a click handler to the children:
$('i.child').click(function(){
$(this).parent().parent().hide()
})
When you click a child, it will cause its grandparent to hide (.nested_parent), which automatically hides its descendants (.nested_parent1 and .child).