I have this sequence of divs
<div class="abuelo1">
<div class="padre">
<div class="nieto1">
<div class="nieto2">
</div>
</div>
The thing is that via grandson2 I want to remove grandparent1 with its contents, while via grandson1 I want to add a grandparent2 below grandparent1 with all the structure it carries (Note: there is only one grandchild1 and grandchild2 for each grandparent, I don't want add more). Any idea how to do it? I know with
$(".nieto2").click(function () {
$('this').parent().remove();
});
I would remove only the "parent" div, but I want to remove the grandparent as well.
Since they are going to be added and removed dynamically, I want to remove and add the grandparents from their own grandchild, not in general.
To remove a grandparent you just have to call parent twice. Think about real life, who is the father's father?
<br/>
and others that have to be closed<div></div>
.To traversing to the top, without needing to know if you are the grandson or great-grandson, or great-great-grandson.