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

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'>&nbsp; <div class='yes'>Child of one</div>&nbsp; <div class='yes'>Child of one</div>&nbsp; <div class='yes'>Child of one</div></div><div class='parent two'>&nbsp; <div>Child of two</div>&nbsp; <div>Child of two</div>&nbsp; <div>Child of two</div></div><div class='parent three'>&nbsp; <div>Child of three</div>&nbsp; <div>Child of three</div>&nbsp; <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'>&nbsp; <div class='yes'>one</div>&nbsp; <div class='yes'></div>&nbsp; <div class='yes'></div></div><div class='parent two'>&nbsp; <div>two</div>&nbsp; <div></div>&nbsp; <div></div></div><div class='parent three'>&nbsp; <div>three</div>&nbsp; <div></div>&nbsp; <div class='yes'></div></div>

Answer 3

这就是你可以用 vanilla js 做的document.querySelectorAll(".parent").forEach(ele => {&nbsp; if (ele.querySelector(".yes") == null) {&nbsp; &nbsp; ele.remove();&nbsp; }})//for checkingdocument.querySelectorAll(".parent").forEach(ele => {&nbsp; console.log(ele)})<div class='parent one'>&nbsp; <div class='yes'></div>&nbsp; <div class='yes'></div>&nbsp; <div class='yes'></div></div><div class='parent two'>&nbsp; <div></div>&nbsp; <div></div>&nbsp; <div></div></div><div class='parent three'>&nbsp; <div></div>&nbsp; <div></div>&nbsp; <div class='yes'></div></div>

Answer 4

您可以通过多种方式实现这一目标。基本方法是：直接选择：$('.parent.two').remove();根据它的索引选择：$('.parent:eq(1)').remove();.yes基于元素作为子元素的存在：$('.parent div').not('.parent .yes').parent().remove();