Using an if statement to check if a div is empty

I'm trying to remove a specific div if a separate div is empty. Here's what I'm using:

$(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 the code to test of #leftmenu is empty. Any help is appreciated!


You can use .is().

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

Or you could just test the length property to see if one was found.

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

Keep in mind that empty means no white space either. If there's a chance that there will be white space, then you can use $.trim() and check for the length of the content.

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

It depends what you mean by empty.

To check if there is no text (this allows child elements that are empty themselves):

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

To check if there are no child elements or text:

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

Or,

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