JSFiddle - React, Tailwind, and code Playground

by Joel Garcia

HTML

<div id = "parent_id">
     <div id = "id_1">
        <div id = "id_1-1">ALIVE</div>
        <div id = "id_1-1"> // I want to delete this</div> 
        <div id = "id_1-1">// I want to delete this </div> 
        <div id = "id_1-2">ALIVE</div>
        <div id = "id_1-2">// I want to delete this </div>
        <div id = "id_1-2">// I want to delete this </div> 
     </div>
     <div id = "id_2">
        <div id = "id_2-1">ALIVE</div>
        <div id = "id_2-1">// I want to delete this </div> 
        <div id = "id_2-1">// I want to delete this </div> 
        <div id = "id_2-2">ALIVE</div>
        <div id = "id_2-2">// I want to delete this </div> 
        <div id = "id_2-2">// I want to delete this </div> 
     </div>
     <div id = "id_3">
        <div id = "id_3-1">ALIVE</div>
        <div id = "id_3-1">// I want to delete this </div> 
        <div id = "id_3-1">// I want to delete this </div> 
        <div id = "id_3-2">ALIVE</div>
        <div id = "id_3-2">// I want to delete this </div> 
        <div id = "id_3-2">// I want to delete this</div>
     </div>
</div>

CSS

#parent_id {
  background-color: #212121;
}
#id_1{
  background-color: #FFFC21;
}
#id_2{
  background-color: #21CCFF;
}
#id_3{
  background-color: #21FF00;
}

JavaScript

$('#parent_id').children('div').each(function(i){
  let removed = $('#id_' + (++i)).children('div').each(function(){
  	$(this).remove();
  });
  $(this).append($(removed[0]).html());
  $(this).append($(removed[3]).html());
});