How to check empty div in Javascript/jQuery?

Question

I have HTML code below in which I want to check empty div in javascript. If div.featured-block is empty then it should apply display: none on the house-senate class.

HTML Code:

<html class="js grunticon objectfit object-fit flexbox" lang="en-US">
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
    <div class="featured-block">

    </div>
</div>
</html>

This is what I have tried but its not working.

jQuery code:

jQuery(function ($) {
    if ($(this).find("html:lang(en-US) .house-senate .featured-block").is(":empty")) {
        $(this).find(".house-senate").css("display", "none");   /* Display none */
    }
})

Problem Statement:

I am wondering what changes I should make in the jQuery code above so that it applies display:none on the house-senate class when div.featured-block is empty

Possible duplicate post [link](https://stackoverflow.com/questions/6813227/how-do-i-check-if-an-html-element-is-empty-using-jquery) — Mahmoud Abdelsattar, Dec 06 '19 at 16:06
Does this answer your question? [Hide div's if they are empty](https://stackoverflow.com/questions/5327751/hide-divs-if-they-are-empty) — frobinsonj, Dec 06 '19 at 16:06
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) — Mahmoud Abdelsattar, Dec 06 '19 at 16:07
@MahmoudMostafa I will have a look. I am wondering whats wrong in my code. Have I used the class in the right way **html:lang(en-US) .house-senate .featured-block** ? — flash, Dec 06 '19 at 16:11

score 2 · Answer 1 · answered Dec 06 '19 at 16:21

2

That div is not empty. It actually contains a text node containing only a newline.

If you want to check that the element is empty or only contains whitespaces you should check its content after your trimmed it.

jQuery(function ($) {
    if ($(this).find("html:lang(en-US) .house-senate .featured-block").text().trim() === '') {
        $(this).find(".house-senate").css("display", "none");   /* Display none */
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html class="js grunticon objectfit object-fit flexbox" lang="en-US">
    <p>There should be a div with some text after this</p>
    <div class="focustop house-senate widget widget-cpac-depth -horizontal">
        <p>This won't be visible</p>
        <div class="featured-block">
           
        </div>
    </div>
    </html>

answered Dec 06 '19 at 16:21

Federico klez Culloca

26,308
17
56
95

I am pasting the same question which I have asked above. I have one quick question. The website on which I am working on is a bilingual website (both EN and FR). For french page, **there can be some content in it**. Is there any we can write one piece of code so that it works for both EN and FR page ? – flash Dec 06 '19 at 16:46
The reason why I have included the following line in HTML code because it would be different both in EN and FR. – flash Dec 06 '19 at 16:47
**For EN: ** **For FR, it would be: ** – flash Dec 06 '19 at 16:49
What if there's multiple `.house-senate .featured-block` elements on the page? – hungerstar Dec 06 '19 at 16:59
@flash please see my answer. It will work for multiple languages and if there's multiple `.house-senate .featured-block` elements on the page. – hungerstar Dec 06 '19 at 17:00
@flash what do you mean? Can you please [edit your question](https://stackoverflow.com/posts/59216486/edit) to include an example for the french language? Also, you can shorten the selector if the `lang` attribute of the `html` element is irrelevant. – Federico klez Culloca Dec 06 '19 at 17:52

Word Rearranger · Answer 2 · 2019-12-06T16:28:07.707

0

The div isn't actually empty because you have spaces in it. Instead of checking if it is empty like that, I used children.length.

Here's a working solution in Javascript only:

if (document.getElementsByClassName("featured-block")[0].children.length === 0) {
  document.getElementsByClassName("house-senate")[0].style.display = "none"; /* Display none */
}

<html class="js grunticon objectfit object-fit flexbox" lang="en-US">
<span>Hello</span>
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
  <div class="featured-block">
  </div>
</div>

</html>

edited Dec 06 '19 at 16:28

answered Dec 06 '19 at 16:13

Word Rearranger

1,306
1
16
25

Thanks for the answer. It looks good. I just tried and its working fine. I have one quick question. The website on which I am working on is a bilingual website (both EN and FR). For french page, there can be some content in it. **Is there any we can write one piece of code so that it works for both EN and FR page ?** – flash Dec 06 '19 at 16:25
The reason why I have included the following line in HTML code because it would be different both in EN and FR. For EN: **** For FR, it would be: **** – flash Dec 06 '19 at 16:25
Take a look at @Frederico klez Culloca 's answer. It is better. I'll keep mine in case inyone is interested in a javascript only solution. – Word Rearranger Dec 06 '19 at 16:29

hungerstar · Answer 3 · 2019-12-06T19:11:11.117

You have a couple issues with your code.

Typically, when someone does $( this ).find(), this is refering to an element like a <div>, <button>, whatever. In your code, this is referring to the window. While that appears to work, here is the typical way to search the whole page with jQuery, $( 'html:lang(en-US) .house-senate .featured-block' ).

Your .featured-block is not actually empty. It has text nodes in it, so is( ':empty' ) will fail.

alert( $( 'html:lang(en-US) .house-senate .featured-block' ).is( ':empty' ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html class="js grunticon objectfit object-fit flexbox" lang="en-US">
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
  <div class="featured-block">
  </div>
</div>

</html>

Make sure there is no white-space between the opening and closing DIV tags.

alert( $( 'html:lang(en-US) .house-senate .featured-block' ).is( ':empty' ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html class="js grunticon objectfit object-fit flexbox" lang="en-US">
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
  <div class="featured-block"></div>
</div>

</html>

Even with the fix above, your code could still be buggy. If there's more than one html:lang(en-US) .house-senate .featured-block element on the page, and at least one of them is empty, then $( 'html:lang(en-US) .house-senate .featured-block' ).is( ":empty" ) will return true. Then, $(this).find(".house-senate").css("display", "none"); would hide every .house-senate on the page. That is, if the $(this) issue was resolved to work properly like $( '.house-senated' ).css( 'display', 'none' );.

alert( $( 'html:lang(en-US) .house-senate .featured-block' ).is( ":empty" )  );

if ( $( 'html:lang(en-US) .house-senate .featured-block' ).is( ":empty" ) ) {
  $( '.house-senate' ).css( 'display', 'none' );
}

.house-senate {
  padding: 2rem;
  border: 1px solid rebeccapurple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<html lang="en-US">
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
  <div class="featured-block"></div>
</div>
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
  <div class="featured-block">Not Empty</div>
</div>
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
  <div class="featured-block"><!-- I'm still empty. --></div>
</div>
</html>

There's also a problem with:

if ( $( 'html:lang(en-US) .house-senate .featured-block' ).is( ":empty" ) ) {
  $( '.house-senate' ).css( 'display', 'none' );
}

The issue here is that there is no direct correlation between the check and what's being hidden. What you want to be doing, and I'm sure this is your intention, is "Only hide .house-senate when its child .featured-block element is empty."

What you need to do is get all the empty .featured-block elements, then for each empty element found, move up the DOM tree from that element to .house-senate and hide it. That way, there's a tight cooupling happening between what is empty and what is hidden.

jQuery always operates on collections (think of an array). As a result, jQuery methods will "magically" work when a selector returns one or many elementsl without you needing to perform loops. Because of this, your code could be simplified to:

$( '.featured-block:empty' ).parent().hide();

.house-senate {
  padding: 2rem;
  border: 1px solid rebeccapurple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<html lang="en-US">
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
  <div class="featured-block"></div>
</div>
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
  <div class="featured-block">Not Empty</div>
</div>
<div class="focustop house-senate widget widget-cpac-depth -horizontal">
  <div class="featured-block"><!-- I'm still empty. --></div>
</div>
</html>

Note: I'm not sure if html:lang(en-US) and .house-senate are neccessary to your selector. You may need to add them back in if you actually need to do something different for a different language or if .featured-block exists outside of a .house-senate element.

How to check empty div in Javascript/jQuery?

3 Answers3