Using an if statement to check if a div is empty

Question

I am trying to remove a specific div if a single div is empty. Here is what I use:

$(document).ready(function () { if ('#leftmenu:empty') { $('#menuTitleWrapper').remove(); $('#middlemenu').css({ 'right': '0', 'position': 'absolute' }); $('#PageContent').css({ 'top': '30px', 'position': 'relative' }); } }); 

I think this is close, but I can’t figure out how to write code to test #leftmenu is empty. Any help is appreciated!

Answer 1

You can use .is() .

 if( $('#leftmenu').is(':empty') ) { // ... 

Or you can simply check the length property to see if it is found.

 if( $('#leftmenu:empty').length ) { // ... 

Remember that empty also means empty space. If there is a chance that there will be free space, you can use $.trim() and check the length of the content.

 if( !$.trim( $('#leftmenu').html() ).length ) { // ... 

Answer 2

It depends on what you mean by blank.

To check for text (this allows the children themselves):

 if ($('#leftmenu').text() == '') 

To check for children or text:

 if ($('#leftmenu').contents().length == 0) 

Or

 if ($('#leftmenu').html() == '') 

Answer 3

If you need a quick demonstration of how you check for empty divs, I suggest you try this link:

http://html-tuts.com/check-if-html-element-is-empty-or-has-children-tags/

---

The following are short examples:

CSS usage

If your div is empty without any white spaces, you can use CSS:

 .someDiv:empty { display: none; } 

Unfortunately, there is no CSS selector that selects the previous sibling element. Exists only for the following sibling element: x ~ y

 .someDiv:empty ~ .anotherDiv { display: none; } 

Using jQuery

Checking the text length of an element using the text () function

 if ( $('#leftmenu').text().length == 0 ) { // length of text is 0 } 

Check if the element has any child tags inside

 if ( $('#leftmenu').children().length == 0 ) { // div has no other tags inside it } 

Check for empty elements if they have a space

 if ( $.trim( $('.someDiv').text() ).length == 0 ) { // white-space trimmed, div is empty } 

Answer 4

You can extend jQuery with such functions:

Expand:

 (function($){ jQuery.fn.checkEmpty = function() { return !$.trim(this.html()).length; }; }(jQuery)); 

Using:

 <div id="selector"></div> if($("#selector").checkEmpty()){ console.log("Empty"); }else{ console.log("Not Empty"); } 

Answer 5

Try the following:

 $(document).ready(function() { if ($('#leftmenu').html() === "") { $('#menuTitleWrapper').remove(); $('#middlemenu').css({'right' : '0', 'position' : 'absolute'}); $('#PageContent').css({'top' : '30px', 'position' : 'relative'}); } }); 

It is not the most beautiful, but it should work. It checks if innerHTML (the contents of #leftmenu) is an empty string (i.e. there is nothing inside).

Answer 6

In my case, I had several items to hide on document.ready. This is the function (filter) that has worked for me so far:

 $('[name="_invisibleIfEmpty"]').filter(function () { return $.trim($(this).html()).length == 0; }).hide(); 

or .remove (), not .hide (), whatever you choose.

FYI: This, in particular, is the solution that I use to hide annoying empty table cells in SharePoint (in addition to this condition, "|| $ (this) .children (" menu "). Length".

Answer 7

 if (typeof($('#container .prateleira')[0]) === 'undefined') { $('#ctl00_Conteudo_ctrPaginaSistemaAreaWrapper').css('display','none'); } 

Answer 8

 if($('#leftmenu').val() == "") { // statement }