Solution 1 :

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>

Solution 2 :

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>

Solution 3 :

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

Problem :

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

Comments

Comment posted by How do I check if an HTML element is empty using jQuery?

Does this answer your question?

Comment posted by jsfiddle.net/nz9m6dy2

hi, can we do like this ?

Comment posted by Always Helping

@user1950349 I have updated my answer. Check the fiddle and answer now.

Comment posted by jsfiddle.net/sL27m4nx

I tried your code in the fiddle here

Comment posted by jsfiddle.net/usmanmunir/bq5m8vyz/35

@user1950349 I have updated my answer to exactly what you want. here is a fiddle:

Comment posted by user1950349

Yes, it’s working. Let me test few more times please.

Comment posted by fiddle

I tried your code in the

Comment posted by user1950349

Are you around ?

Comment posted by Always Helping

This is not what the OP asked and trying to archive as per the question. Thanks anyway 🙂