javascript - 在 vanilla JavaScript 中删除所有具有特定子元素(嵌套至少 2 层)的元素

Question

假设我有 2 个 HTML 对象。

第一个是1个div对象:

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

第二个是具有各自嵌套的 3 个 div 对象:

<div class="d1">
    <div class="d2">
        <div class="d3">
        </div>
    </div>
</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 级对象。请假设我们可以定位更多的 child ，比如第 300 个 child 。例如，如果对象包含 30 或 300(而不是 3)的 child ，则删除该对象。一个答案建议为相关 child (例如， child 编号 55)添加一个 id。我认为这是覆盖更大集合的好方法。

Answer 1

您可以使用 ".d1 > .d2 > .d3" 选择器选择此类嵌套元素，然后使用 removeChild 或 remove 删除它们> 功能。

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>