How to hide/remove a 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

You can do this using only CSS:

div:empty { display: none }