Question

我有以下标记：

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

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

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/

因此，代码中的空格将被视为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>

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>

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

2 个答案: