Remove or hide a div if it's empty

Question

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 this is a simple question. Having a Monday!

Thanks!

Answer 1

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.

Answer 2

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

Answer 3

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();