Hide DIV when empty

Question

I have some server side HTML output I cannot deal with using pure CSS, essentially the DIV sometimes holds:

<div><span>Content</span></div>

or

<div><p>Content</p></div>

or

<div>Content</div>

or

<div> </div>

When the DIV == <div> </div> I want to remove it.

Any ideas?

Answer 1

I think you can do the following:

$(function() {
  $("div:empty").hide();
});

jQuery's empty pseudo selector is great.

Answer 2

Even better (assuming jQuery):

$(document).ready(function() { $('div:empty').remove(); });

EDIT: The other answers are good, but the OP wanted to remove the empty item, not hide it.