在原始JavaScript中删除带有特定子级（嵌套至少2个级别）的所有元素

Question

Say I have 2 HTML objects.

The first is 1 div object:

<div class="d1">
</div>

The second is a 3 div object with respective nesting:

<div class="d1">
    <div class="d2">
        <div class="d3">
        </div>
    </div>
</div>

As you can see, the third is the deepest.

Let's also assume I have a webpage with 50 elements of the first object, and 50 elements of the second object.

How could I delete all HTML objects containing a certain element nested deep inside them (in this case, the element with .d3 ).

I could do:

let f = document.querySelector('.d1');
let s = document.querySelector('.d2');
let t = document.querySelector('.d3');

if (t.parentNode == s && s.parentNode == f) {
    f.remove();
}

In jQuery I could also do:

if( $(f)[1].hasChildNodes() ) {
    f.remove();
}

What is an efficient way to do that in vanilla JS?

Update:

I used a 3 level object just for the sake of a simple example. Please assume there might be much more children we could target, say, the 300th child. For example, if the object includes child 30, or 300 (instead of 3), remove the object. One answer suggests adding an id for the relevant child (say, child number 55). I think this is a good approach to cover the larger collections.

Answer 1

You can select such nested elements using ".d1 > .d2 > .d3" selector, and then remove them using removeChild or remove function.

 var d3Elements = document.querySelectorAll(".d1 > .d2 > .d3"); for(var i = 0; i < d3Elements.length; i++) { console.log(d3Elements[i]); d3Elements[i].parentElement.removeChild(d3Elements[i]); } 

 <div class="d1"> D1 </div> <div class="d1"> D1 <div class="d2"> D2 <div class="d3"> D3 </div> </div> </div> 

Answer 2

Set an id for the div for which you want to remove all children:

<div class="d1">
    <div id="removchildren" class="d2">
        <div class="d3">
        </div>
    </div>
</div>

Get that element and remove inner html

var myDiv = document.getElementById("removchildren");
myDiv.innerHTML = '';

You can also traverse and make it dynamic using myDiv.childNodes