jquery – 检查每个div是否为空,然后将其删除

<div class="product">
        <div class="producttext">Product1</div>
    </div>
    <div class="product">
        <div class="producttext"></div>
    </div>
    <div class="product">
        <div class="producttext"></div>
    </div>
    <div class="product">
        <div class="producttext"></div>
    </div>
    <div class="product">
        <div class="producttext">Product4</div>
    </div>

我试图用jQuery选择空的.producttext div然后删除它们.

我正在尝试使用此代码,但它无法正常工作：

$('.producttext').each(function(){
        if ($(this).is(':empty')){
          $(this).remove();
        }
    });

知道我的代码有什么问题吗？

我想你要删除.product div然后你可以使用:has()选择器

$('.product:has(.producttext:empty)').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product">
  <div class="producttext">Product1</div>
</div>
<div class="product">
  <div class="producttext"></div>
</div>
<div class="product">
  <div class="producttext"></div>
</div>
<div class="product">
  <div class="producttext"></div>
</div>
<div class="product">
  <div class="producttext">Product4</div>
</div>

或者您只想删除.producttext然后使用

$('.product .producttext:empty').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product">
  <div class="producttext">Product1</div>
</div>
<div class="product">
  <div class="producttext"></div>
</div>
<div class="product">
  <div class="producttext"></div>
</div>
<div class="product">
  <div class="producttext"></div>
</div>
<div class="product">
  <div class="producttext">Product4</div>
</div>

更新：

07001 – Select all elements that have no children (including text nodes).
Taken from 07002

因此,代码中的空格将被视为textNode,因此您需要使用以下方法,使用filter()和$.trim()(或trim())

$('.product').filter(function() {
  //return $(this).text().trim() == '';
  return $.trim($(this).text()) == '';
}).remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product">
  <div class="producttext">Product1</div>
</div>
<div class="product">
  <div class="producttext"></div>
</div>
<div class="product">
  <div class="producttext"></div>
</div>
<div class="product">
  <div class="producttext"></div>
</div>
<div class="product">
  <div class="producttext">Product4</div>
</div>