Trying to make empty <li> tags hide on page load

Question

My current code is:

<ul>
<li class="nav">
<-- uc tag with hyperlink that show/hides based on a code behind & user rights. --><br />
</li>
</ul>

<script type="text/javascript" >
    $('li.nav:empty').hide();       
</script>

The line elements automatically populate in the application based upon user rights. There are multiple instances of this type of link within the navigation.

This solution worked in a different application that I was working on, but for some reason isn't working on my current application.

The code above is only an example - not a direct copy and paste. The BR tags are not present in the actual application nor is the filler text.

Answer 1

First you need to remove the
from inside the li ..

Enclose your script in DOM ready Handler

<script type="text/javascript">
   $(function () {
      $('li.nav:empty').hide();
    });       
</script>

Answer 2

If you want to hide li elements with no text, you can use this :

$('li.nav').filter(function(){return $(this).text().trim().length==0}).hide();

Demonstration