如果父元素没有具有特定类的子元素，则移除父元素。

Question

我有一个像这样的代码：

<div class='parent one'>
  <div class='yes'></div>
  <div class='yes'></div>
  <div class='yes'></div>
</div>

<div class='parent two'>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class='parent three'>
  <div></div>
  <div></div>
  <div class='yes'></div>
</div>

如何删除 .parent.two，因为它没有任何带有 .yes 的子元素？我尝试过的方法都没有成功：

$('.parent div:not(.yes)').remove();

- Ozik Jarwo

---

https://dev59.com/SXRB5IYBdhLWcg3wv5o_#69274468 - Billu

Answer 1

你可以在 :has 中使用 :not：

$(() => $('.parent:not(:has(.yes))').remove())

.parent{ background: orange; height: 100px; width: 100px; margin: 10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent one'>
  <div class='yes'>Child of one</div>
  <div class='yes'>Child of one</div>
  <div class='yes'>Child of one</div>
</div>

<div class='parent two'>
  <div>Child of two</div>
  <div>Child of two</div>
  <div>Child of two</div>
</div>

<div class='parent three'>
  <div>Child of three</div>
  <div>Child of three</div>
  <div class='yes'>Child of three</div>
</div>

- Anurag Srivastava

Answer 2

您可以创建一个由:not和:has组合而成的选择器，然后使用remove方法。这将选择所有具有.parent类但没有子元素.yes类的元素。

$('.parent:not(:has(.yes))')

$('.parent:not(:has(.yes))').remove()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent one'>
  <div class='yes'>one</div>
  <div class='yes'></div>
  <div class='yes'></div>
</div>

<div class='parent two'>
  <div>two</div>
  <div></div>
  <div></div>
</div>

<div class='parent three'>
  <div>three</div>
  <div></div>
  <div class='yes'></div>
</div>

- Nenad Vracar

Answer 3

这是您可以使用原生JavaScript实现的方法。

document.querySelectorAll(".parent").forEach(ele => {
  if (ele.querySelector(".yes") == null) {
    ele.remove();
  }
})

//for checking
document.querySelectorAll(".parent").forEach(ele => {
  console.log(ele)
})

<div class='parent one'>
  <div class='yes'></div>
  <div class='yes'></div>
  <div class='yes'></div>
</div>

<div class='parent two'>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class='parent three'>
  <div></div>
  <div></div>
  <div class='yes'></div>
</div>

- Shubham Dixit

Answer 4

您可以通过多种方式实现这一目标。基本方法如下：

直接选择：

$('.parent.two').remove();

根据索引进行选择：

：

$('.parent:eq(1)').remove();

基于有子元素为.yes的存在： $('.parent div').not('.parent .yes').parent().remove();

- Pranav Rustagi

Answer 5

检查每个父级

的.innerHTML，以查看是否存在具有该文本的子级，并在不存在时删除父级。

document.querySelectorAll("div.parent").forEach(function(parentDiv){
  if(!parentDiv.innerHTML.includes('<div class="yes">')){
    parentDiv.remove();
  }
});

<div class='parent one'>1
  <div class='yes'></div>
  <div class='yes'></div>
  <div class='yes'></div>
</div>

<div class='parent two'>2
  <div></div>
  <div></div>
  <div></div>
</div>

<div class='parent three'>3
  <div></div>
  <div></div>
  <div class='yes'></div>
</div>

- Scott Marcus

---

另外，使用 parentDiv.querySelector(".yes").length 不是更好吗？ - Anurag Srivastava

你可以用许多不同的方法来实现它。我这里只是展示了一种。 - Scott Marcus