检查每个 div 是否为空，然后将其删除。

Question

I have the following markup:

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

有没有想法，我的代码有什么问题？

- propcode

---

这完全取决于你所说的“它不能用”是什么意思。它做不到什么？相反它又做了些什么？ - David Thomas

当您在 $().each() 调用中只有 jQuery 调用时，通常有很大的机会可以不需要使用 each()。 - Simba

我现在看到我的“producttext”实际上并不是空的，它上面有一些空格。 - propcode

Answer 1

在您的代码中，它仅删除空的.producttext div，父div .product 将保留。

我认为您想要删除.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>

更新:

:empty - 选择所有没有子元素（包括文本节点）的元素。引自https://api.jquery.com/filter/

因此，您的代码中的空格将被视为文本节点，因此您需要使用下面的方法，即使用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>

- Pranav C Balan

---

这仍然没有解释为什么他的解决方案不起作用。 - wirey00

如果div标签内有空格，:empty还能正常工作吗？我认为这就是我的问题。 - propcode

只会删除空的.producttext div，而不会删除它的父元素。 - Pranav C Balan

从api :empty() 描述：选择所有没有子元素的元素（包括文本节点）。 - wirey00

谢谢，使用 trim 的那个方法有效。我认为这可能与 div 元素内含空格有关。 - propcode

作为警告，在旧版浏览器中不支持 trim() 方法 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim#Browser_compatibility - 尽管现在可能不是太大的问题。但出于兼容性原因，最好使用 jQuery 的 trim 方法，除非你想自己实现它。$.trim($(this).text()) - wirey00

Answer 2

如果存在空格或文本节点，你应该将其修剪。

$('.producttext')
  .filter(function() {
    return $.trim($(this).text()).length === 0;
  }).remove();  //or .closest(".product").remove();

.producttext {
  min-height: 20px; border: 1px solid black;  
}

<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>

- epascarello