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() == '')