CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SJWimmer87
SJWimmer87

Reputation: 73

Hiding a list element if empty css/jquery

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');

Upvotes: 1

Views: 2787

Answers (2)

Alvaro Flaño Larrondo
Alvaro Flaño Larrondo

Reputation: 5734

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;
}

Upvotes: 4

Pranav C Balan
Pranav C Balan

Reputation: 115222

You can use filter() to filter empty list

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

Upvotes: 2

Related Questions