Question

What’s wrong with this?
I’m trying to hide all empty li.

    $(document).ready(function() {
        $("#details li").each(function() {
            if ($(this).length == 0) {
                $(this).css({ display: "none" }); ;
            }
        });
    });

Markup:

<ul id="details">
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <li></li>
 <li></li>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
</ul>

Thank you in advance

Answer 1

I think what you want is the .text() length, like this:

$(function() {
  $("#details li").each(function() {
    if ($(this).text().length == 0) {
      $(this).css({ display: "none" }); ;
    }
  });
});

Or a bit shorter:

$("#details li").filter(function() {
  return $(this).text().length == 0;
}).hide();

Or a slightly different check that works for your purposes, courtesy of @Rafael:

$("#details li:empty").hide();