Remove or hide a div if it's empty

I know this should be simple but can't figure it out. Here's the code.

<div class="cols lmenu_item1" id="leftMenuWrapper">
<div id="leftmenu"></div>
</div>

I simply need to remove the "leftMenuWrapper" if "leftmenu" is empty. Here's what I've been using.

$('#leftmenu').empty().remove('#leftMenuWrapper');

Sorry if thi开发者_C百科s is a simple question. Having a Monday!

Thanks!

You can do it like this:

$('#leftmenu:empty').parent().remove();

This only selects #leftmenu if it's :empty, and then only grabs the .parent() of that to .remove(). If it wasn't empty, then the first selector won't find anything, or any parent to remove either.

If you want to remove if it looks empty:

if ( $.trim( $('#leftmenu').text() ) == "")
    $('#leftMenuWrapper').remove();

jsFiddle example

The above takes just the text contents of #leftmenu and trims off the whitespace before checking if anything's there.

The big advantage of the above over $(#leftmenu:empty) is that the above removes in the following cases where :empty would not:

                  // The above code works in these cases where ":empty" does not:

<div id="leftmenu">     </div>                              // <== white space
<div id="leftmenu"><p></p></div>                            // <== empty elements

.trim()
.text()
.remove()

Note that the following is more efficient (but less readable imo):

var $elie = ('#leftmenu');
if ( $.trim( $elie.text() ) == "")
    $elie.parent().remove();

if(!$('#leftmenu').html()){ $('#leftmenu').parent().remove(); }