Question

I know this has got to be incredibly simple but I’ve been banging my head against the wall on this one. My HTML is:

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

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

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

Thank you! Let me know if you need any more info.

Answer 1

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

This one liner should do it.

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

Edit: and by empty selector I mean that if $("ul.awards li:empty") returns something then it will hide the parent, but if the selection is empty it will silently ignore the closest() as there is nothing to apply it to.