CODEWITHSUNDEEP
jquery
propcode
propcode

Reputation: 309

Check if each div is empty and then remove it

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>

I'm trying to select with jQuery the .producttext divs that are empty and then remove them.

I'm trying with this code but it's not working:

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

Any idea what's the problem with my code?

Upvotes: 3

Views: 861

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115232

In your code it remove only the .producttext div which is empty, the parent div .product will be there.

I think you want to remove the .product div then you can use :has() selector

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

Or you just want to remove .producttext then use

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

Update :

:empty - Select all elements that have no children (including text nodes). Taken from https://api.jquery.com/filter/

So whitespace in your code will treat as textNode so you need to use the below method using filter() and $.trim()(or 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>

Upvotes: 6

epascarello
epascarello

Reputation: 207521

If there is whitespace or textnodes, you should probably trim it

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

Upvotes: 1

Related Questions