CODEWITHSUNDEEP
jqueryhideelementshow
Sabra
Sabra

Reputation: 78

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

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.

Upvotes: 3

Views: 862

Answers (3)

Sushanth --
Sushanth --

Reputation: 55750

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>

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382160

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

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

:empty Description: Select all elements that have no children (including text nodes).

I think your $('li.nav:empty') is not empty as there are some text nodes.

You should probably write a filter.

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

Upvotes: 0

Related Questions