如果父项没有特定类别的子项，则删除父项

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();

Answer 1

您可以:not使用:has：

$(() => $('.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>

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>

Answer 3

这就是你可以用 vanilla js 做的

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>

Answer 4

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

直接选择：

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

根据它的索引选择：

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

.yes基于元素作为子元素的存在：

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