Hide parent div if <li> is empty

Question

I know that it should be incredibly simple, but I hit my head against the wall on it. My HTML:

<div class="awardsparent">
<h4>AWARDS</h4>
<ul class="awards"><li></li></ul>
</div>

I am trying to hide the div.awardsparent container if ul.awards li is empty. Here is my jQuery code:

$(function() {          
  if($('ul.awards li:empty')) {
  $('div.awardsparent').hide();
    }
});

Thank! Let me know if you need more information.

Answer 1

Technically, you probably don't even need an if test, just let jQuery empty selectors do the magic.

This one liner should do it.

$("ul.awards li:empty").closest('div.awardsparent').hide()

Edit: with an empty selector, I mean that if it $("ul.awards li:empty")returns something, it will hide the parent element, but if the choice is empty, it silently ignores it closest(), since there is nothing to use it.

Answer 2

Try:

if ($('ul.awards li').is(':empty')) {
    $('div.awardsparent').hide();
}​

jsFiddle

Answer 3

.length, :

if ($("ul.awards li:empty").length)