Hiding a list element if empty css/jquery

Question

I am filling a list up dynamically from a database, the fill up works fine, but where I have no data the list item is empty. I tried to hide the empty rows, bot my code does nothing, where should I put it if it is correct? The div is filled in from the document ready function, and after the div that contains this one, shows on mouseclick.

if ($("#results").find('.list-group-item').length() == 0){
            $(this).css('height','0px');

Check your console log. length is a property, not a function. — Curtis
– Curtis, Commented Oct 29, 2015 at 11:28

Alvaro Flaño Larrondo · Accepted Answer · 2015-10-29 11:43:50Z

4

You could use the CSS3 :empty selector, it's cleaner:

#results:empty{
    display: none;
}

In order to :empty to match your list it must be completely empty, there must be no white spaces or line breaks. Like <ul id="results"></ul>

Or to just hide the <li> elements:

.list-group-item:empty{
    display:none;
}

edited Oct 29, 2015 at 11:43

answered Oct 29, 2015 at 11:36

Alvaro Flaño Larrondo

5,7402 gold badges31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SJWimmer87 Over a year ago

I dont want to hide the whole UL, I yust want to hide the empty <li class="list-group-item"></li> element.

Alvaro Flaño Larrondo Over a year ago

In that case use another selecter targeting each <li>, I'll update the answer.

Pranav C Balan · Accepted Answer · 2015-10-29 11:31:39Z

2

You can use filter() to filter empty list

$("#results").find('.list-group-item').filter(function() {
  return $.trim($(this).text()) == '';
}).hide()

edited Oct 29, 2015 at 11:31

answered Oct 29, 2015 at 11:29

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

2 Comments

Jamiec Over a year ago

Did you mean to make this a snippet, or just a code block?

pawel Over a year ago

Or just use api.jquery.com/empty-selector $("#results .list-group-item:emty").hide()

Collectives™ on Stack Overflow

Hiding a list element if empty css/jquery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related