Reach the parent element from the child-CodePudding

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 >
        <span >
            <span >
                <i ></i>
            </span>
        </span>
    </div>
    <div >
        <span >
            <span >
                <i ></i>
            </span>
        </span>
    </div>
    <div >
        <span >
            <span >
                <i ></i>
            </span>
        </span>
    </div>

CodePudding user response：

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