在vanilla JavaScript中删除具有特定子级（至少嵌套2级）的所有元素

假设我有两个HTML对象

第一个是1

div

对象：

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

正如你所看到的，第三个是最深的

我们还假设我有一个网页，第一个对象有50个元素，第二个对象有50个元素

如何删除所有包含嵌套在其中的特定元素的HTML对象（在本例中，是包含

.d3

的元素）

我可以做到：

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

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

在jQuery中，我还可以执行以下操作：

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

在vanilla JS中，什么是实现这一点的有效方法

更新：

---

为了一个简单的例子，我使用了一个3层对象。请假设我们可以瞄准更多的孩子，比如说第300个孩子。例如，如果对象包含子对象30或300（而不是3），请删除该对象。一个答案建议为相关的孩子添加一个

id

（比如，孩子编号55）。我认为这是覆盖较大集合的一个好方法。

为要删除其所有子项的

div设置一个id：

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

您还可以使用
myDiv.childNodes
为要删除其所有子节点的
div
设置id来遍历并使其动态：

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

您还可以使用
myDiv.childNodes
遍历并使其动态。您可以使用
.d1>.d2>.d3“
选择器选择此类嵌套元素，然后使用
removeChild
或
remove
函数将其删除


var d3Elements=document.querySelectorAll（“.d1>.d2>.d3”）；
对于（var i=0；i


D1
D1
D2
D3
您可以使用
”.d1>.d2>.d3“
选择器选择此类嵌套元素，然后使用
removeChild
或
remove
函数将其删除


var d3Elements=document.querySelectorAll（“.d1>.d2>.d3”）；
对于（var i=0；i


D1
D1
D2
D3
或者，如果结构不一定是那种格式，只需document.queryselectoral（“.d1.d3”）@andrewf是的，很好。我知道这一点，但避免了假设他们可能不想删除
.d1
：类似
.d1>.d3
的元素，谢谢@NisargShah。我想最好添加一个ID，并在所有具有ID的元素上使用
querySelectorAll
（或者，如果我们不能添加ID，则所有元素都具有特定的
textContent
，或者子元素数超过X）。或者，如果结构不一定是那种格式，只需document.querySelectorAll（.d1.d3”）@andrewf是的，这一点不错。我知道这一点，但避免了假设他们可能不想删除
.d1
：类似
.d1>.d3
的元素，谢谢@NisargShah。我想最好添加一个ID，并对所有具有ID的元素使用
querySelectorAll
（或者，如果我们无法添加ID，则所有元素都具有特定的
textContent
，或者具有X个以上的子元素）。谢谢，您所说的“使其动态化”是什么意思？我的意思是您可以使用类似的
myDiv.childNodes[0].innerHtml='
如果
d2
中有多个项目。谢谢，您所说的“使其动态化”是什么意思？我的意思是您可以使用类似这样的
myDiv.childNodes[0]。innerHtml='
如果
d2
中有多个项目。
var myDiv = document.getElementById("removchildren");
myDiv.innerHTML = '';