删除具有特定 child 的所有元素（嵌套至少 2 层），原版 JavaScript

Question

假设我有 2 HTML objects.

第一个是1divobject:

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

第二个是 3 div object 分别嵌套：

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

如你所见，第三个是最深的。

我们还假设我的网页包含第一个 object 的 50 个元素和第二个 object.

的 50 个元素

如何删除所有包含嵌套在其中的特定元素的 HTML object（在本例中，包含 .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();
}

在普通 JS 中执行此操作的有效方法是什么？

更新：

为了一个简单的例子，我使用了 3 级 object。请假设可能有更多 children 我们可以瞄准，比如说，第 300 个 child。例如，如果 object 包含 child 30 或 300（而不是 3），请删除 object。一个答案建议为相关的 child 添加一个 id（例如，child 数字 55）。我认为这是覆盖更大集合的好方法。

Answer 1

为要删除所有子项的 div 设置一个 ID：

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

获取该元素并删除内部 html

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

您还可以使用 myDiv.childNodes

遍历并使其动态化

Answer 2

您可以使用 ".d1 > .d2 > .d3" select 或者 select 此类嵌套元素，然后使用 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>

删除具有特定 child 的所有元素（嵌套至少 2 层），原版 JavaScript

Remove all elements with a certain child (nested at least 2 levels in), in vanilla JavaScript

html

javascript

css

conditional

更新：