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

Question

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

Does this answer your question? [How do I check if an HTML element is empty using jQuery?](https://stackoverflow.com/questions/6813227/how-do-i-check-if-an-html-element-is-empty-using-jquery) — Karan Singh, Jun 25 '20 at 08:11

Karan Singh · Answer 1 · 2020-06-25T08:08:14.530

1

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>

edited Jun 25 '20 at 08:08

answered Jun 24 '20 at 23:24

Karan Singh

400
1
2
13

I tried your code in the [fiddle](https://jsfiddle.net/tz4c6ns0/3/) but its not working. I am wondering if you can have a look. – user1950349 Jun 25 '20 at 01:22
Are you around ? – user1950349 Jun 25 '20 at 03:24

Always Helping · Accepted Answer · 2020-06-25T03:53:15.960

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>

hi, can we do like this ? https://jsfiddle.net/nz9m6dy2/ The reason why I did in that way because there are multiple `big-block` class in my page. I want to call only the specific one. — user1950349, Jun 25 '20 at 02:32
@user1950349 I have updated my answer. Check the fiddle and answer now. — Always Helping, Jun 25 '20 at 02:38
I tried your code in the fiddle here https://jsfiddle.net/sL27m4nx/ but its not working. I am wondering if you can have a look. — user1950349, Jun 25 '20 at 03:02
@user1950349 I have updated my answer to exactly what you want. here is a fiddle: https://jsfiddle.net/usmanmunir/bq5m8vyz/35/ — Always Helping, Jun 25 '20 at 03:53

score 0 · Answer 3 · answered Jun 25 '20 at 02:46

0

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

answered Jun 25 '20 at 02:46

DongYang.IC5067

46
5

This is not what the OP asked and trying to archive as per the question. Thanks anyway :) – Always Helping Jun 25 '20 at 02:54

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

3 Answers3