JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parent">
<div class="second">
<div class="third">
<ul>
<li>Hey</li>
</ul>
</div>
</div>
</div>
<div class="parent">
<div class="second">
<div class="third">
<ul>
<li>Howdy</li>
</ul>
</div>
</div>
</div>
CSS
.parent {
background-color:red;
padding:20px;
}
.second {
background-color:blue;
padding:20px;
}
.third {
background-color:green;
padding:20px;
}
ul {
background-color:orange;
padding:20px;
}
li {
background-color:pink;
padding:20px;
}
JavaScript
var parents = $("body").children(":not(:empty)");
var checkBody = 1;
var speed = 1000;
var childToRemove = '';
function loopyLoop(){
if (childToRemove != ''){
$(childToRemove).remove();
childToRemove = '';
}
if (checkBody == 1){
if ($(parents).length > 1){
parents = $(parents).first().children();
loopyLoop();
}
if ($(parents).children().length > 0){
parents = $(parents).children().first();
loopyLoop();
} else{
parents = $(parents).parent();
if ($(parents).is('body') && $(parents).children().length == 1){
checkBody = 0;
childToRemove = $(parents).children().first();
setInterval(loopyLoop, speed);
} else {
childToRemove = $(parents).children().first();
setInterval(loopyLoop, speed);
}
}
}
}
$(function(){
loopyLoop();
});