jquery - Hide div's if they are empty

Question

I have some div's that maybe be empty (depending on server-side logic).

<div id="bar">

<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>
<div class="section" style="display:block;"></div>

</div>

If they don't have any html inside the div's (with class section), I just want to hide them.

How can I do this?

Answer 1

jQuery has a :empty selector. So, you can simply do:

$('div.section:empty').hide();