How hide() div with ul list if all <li> have properties display: none;

Question

I have a problem with my little search. I have 6 different Categories, like this below. When I trying to find something, I want that box with categories where there is no any result, will be hidden - all li have properties display: none.

<div class="category">
    <h4>Cars</h4>
    <ul class="list">
        <li>Ford</li>
        <li>Opel</li>
        <li>Volkswagen</li>
        <li>Saab</li>
        <li>BMW</li>
    </ul>
</div>

See on GitHub

Answer 1

.filter() your $(".category") by returning only the ones who's all lis are hidden

http://api.jquery.com/filter/
https://api.jquery.com/visible-selector/

$(".category").show().filter(function() {
  return ! $(this).find("li:visible").length;
}).hide();

---

Full-featured example in action:

var $cat = $('.category');
var $li = $cat.find('li');

$('#box').on("input", function() {

  var inputValue = $.trim(this.value); // Trim values!
  var rgx = new RegExp(inputValue, "i"); // Case insensitive

  // Handle LI elements visibility first
  $li.show().filter(function() {
    return ! rgx.test($(this).text())
  }).hide();

  // Than handle .category wrappers
  $cat.show().filter(function() {
    return ! $(this).find("li:visible").length;
  }).hide();

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <h3 class="text-center main-header">What do you need?</h3>
      <div class="input-group">
        <input type="text" class="form-control" id="box">
      </div>
    </div>
  </div>
  <div class="row box-wrapper">
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Cars</h4>
        <ul class="list">
          <li style="">Ford</li>
          <li style="">Opel</li>
          <li style="">Volkswagen</li>
          <li style="">Saab</li>
          <li style="">BMW</li>
        </ul>
      </div>
    </div>
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Clothes</h4>
        <ul class="list">
          <li style="">Shirt</li>
          <li style="">Blouse</li>
          <li style="">Trousers</li>
          <li style="">Dress</li>
          <li style="">T-shirt</li>
        </ul>
      </div>
    </div>
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Phones</h4>
        <ul class="list">
          <li style="">Iphone</li>
          <li style="">Samsung</li>
          <li style="">Xaomi</li>
          <li style="">Huawei</li>
          <li style="">Nokia</li>
        </ul>
      </div>
    </div>
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Software</h4>
        <ul class="list">
          <li style="">Visual Studio Code</li>
          <li style="">Brackets</li>
          <li style="">Atom</li>
          <li style="">Notepad++</li>
          <li style="">Sublime Text</li>
        </ul>
      </div>
    </div>
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Cameras</h4>
        <ul class="list">
          <li style="">Sony</li>
          <li style="">Canon</li>
          <li style="">Samsung</li>
          <li style="">Panasonic</li>
          <li style="">Nikon</li>
        </ul>
      </div>
    </div>
    <div class="col-6 col-sm-4 box">
      <div class="category">
        <h4>Home</h4>
        <ul class="list">
          <li style="">Tools</li>
          <li style="">Furniture</li>
          <li style="">Equipment</li>
          <li style="">Pets</li>
          <li style="">Other</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 2

If you want to hide the div in case all li have property of display : none you can use the following code :

var li = $(".list li").css({'display' : 'none'})
if(li){
   $(".category").css({'visibility' : 'hidden'})
} else {
   $(".category").css({'display' : 'none'})
}

Hope it helps :)