CODEWITHSUNDEEP
javascripthtmljquery
user1950349
user1950349

Reputation: 5146

How to check for empty div which has no text in jQuery?

I have an html code as shown below in which big-block div is empty. What I want to achieve is if big-block div is empty then apply css display:none on hello-world div.

<div class="hello-world">
   <h1 class="widget__title">Hello World</h1>
   <div class="big-block">
   
   </div>
</div>

This is what I have tried but unfortunately its not working.

jQuery(document).ready(function ($) {
    if($('.hello-world .big-block').text().length == 0) {
        $('.hello-world').css("display", "none");
    }
});

Upvotes: 0

Views: 87

Answers (3)

Karan Singh
Karan Singh

Reputation: 400

The big-block DIV contains whitespace, use trim() for removing that

jQuery(document).ready(function ($) {
    if(!$.trim($('.big-block').html())) {
        $('.hello-world').css("display", "none");
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hello-world">
   <h1 class="widget__title">Hello World</h1>
   <div class="big-block">

   </div>
</div>

Upvotes: 1

Always Helping
Always Helping

Reputation: 14570

This what you can simplified version. just use .text() to see if there is something it .big-block div

As you mentioned that you have multiple .big-block divs so you can just check for a specific to be empty like this below. Just .hello-world h1 div to call that check specific only.

Fiddle Demo: https://jsfiddle.net/usmanmunir/bq5m8vyz/35/

Just run snippet to see in action.

jQuery(document).ready(function($) {
  if ($(".hello-world .big-block").children().length == 0 && $('.hello-world .big-block').text() == 0) {
    $('.hello-world').css("display", "none");
    console.log('.big-block is empty')
  } else {
    console.log('.big-block is NOT empty')
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hello-world">
  <h1 class="widget__title">Hello World</h1>
  <div class="big-block">
    <a href="https://www.linkedin.com/" target="_self" class="featured-block__item cf">
      <div class="featured-block__item-inner">
        <figure class="featured-block__image img-fit" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject">
          <img class="default-opacity" src="https://i.picsum.photos/id/43/200/300.jpg?hmac=F_cVhLISpNmZ9wjirHfMJgX9rQzMYJbJE1xzfwmV36c" data-fallback-img="https://i.picsum.photos/id/43/200/300.jpg?hmac=F_cVhLISpNmZ9wjirHfMJgX9rQzMYJbJE1xzfwmV36c" alt="sdsd">
        </figure>
      </div>
    </a>
  </div>
</div>

Upvotes: 1

DongYang.IC5067
DongYang.IC5067

Reputation: 46

try this, you can use regular expression to remove whitespace

<div id="item"></div>
console.log($('#item').text().length)  // 0


<div id="item"> </div>
console.log($('#item').text().length)  // 1 
console.log($('#item').text().replace(/\s/g, "").length)  // 0

<div id="item">
</div>
console.log($('#item').text().length)  // 5
console.log($('#item').text().replace(/\s/g, "").length)  // 0

Upvotes: 0

Related Questions