使用vanilla JS检测是否所有孩子都被隐藏并隐藏父div

Question

As the title suggests, I wwant to build a filter that hides elements. If all children are hidden then the paretn should also set itself to display none only I can't quite figure out how to approach it. I've tried the below with no luck.

https://jsfiddle.net/6wt0jndp/1/

function filter(e){
  search = e.value.toLowerCase();
  console.log(e.value)
  document.querySelectorAll('.kb-item').forEach(function(row){
     text = row.innerText.toLowerCase();
     if(text.match(search)){
        row.style.display="block"
     } else {
        row.style.display="none"
     }

      // need to count hidden items and if all instances of .kb-items are hidden, then hide .kb-item
     var countHidden = document.querySelectorAll(".kb-item[style='display: none;']").length;
     var children = document.querySelectorAll(".kb-items").length;

     if(countHidden > children){
       row.style.display="none"
     }

      console.log(countHidden);
  })
}

HTML

<div class="kb-items">
  <h1>fruits</h1>
  <div class="kb-item">apple</div>
  <div class="kb-item">banana</div>
</div>

<div class="kb-items">
  <h1>vegetables</h1>
  <div class="kb-item">lettuce</div>
  <div class="kb-item">onion</div>
  <div class="kb-item">carrot</div>
</div>

Answer 1

You need to do things to parent after iterating children, not during doing it.

1. Get children for each parent they have, not whole .kb-item elements.

2. Compare the length of children and length of them with display: none style.

function filter(e) {
  // ...
  var parents = document.querySelectorAll(".kb-items");
  parents.forEach(parent => {
    if (parent.querySelectorAll(".kb-item").length == parent.querySelectorAll(".kb-item[style='display: none;']").length) {
      parent.style.display = "none"
    } else {
      parent.style.display = "block"
    }
  })

Complete code snippet :

 function filter(e) { search = e.value.toLowerCase(); console.log(e.value) document.querySelectorAll('.kb-item').forEach(function(row) { text = row.innerText.toLowerCase(); if (text.match(search)) { row.style.display = "block" } else { row.style.display = "none" } }) var parents = document.querySelectorAll(".kb-items"); parents.forEach(parent => { if (parent.querySelectorAll(".kb-item").length == parent.querySelectorAll(".kb-item[style='display: none;']").length) { parent.style.display = "none" } else { parent.style.display = "block" } }) } 

 <input type="text" onkeyup="filter(this)" /> <div class="kb-items"> <h1>fruits</h1> <div class="kb-item">apple</div> <div class="kb-item">banana</div> </div> <div class="kb-items"> <h1>vegetables</h1> <div class="kb-item">lettuce</div> <div class="kb-item">onion</div> <div class="kb-item">carrot</div> </div> 

Answer 2

may be you can trigger two function on keypress . One would detect the elements state in a group which will detect whether all the element is hidden or not. We can edit the below code a bit for dom efficency.

Hope this is the result what you are expecting fiddle link : https://jsfiddle.net/binaryslate/2z1ptnao/1/

        <input type="text" onkeyup="filter(this);detectParent();"/>

        function detectParent()
        {
            var collectionref=document.querySelectorAll(".kb-items");
            collectionref.forEach(group=>{
            var itemcollection=group.getElementsByClassName("kb-item");
            var hidecounter=0;
            for(var j=0;j<itemcollection.length;j++)
            {

                if(itemcollection[j].style.display==='none')
                {
                    hidecounter++;
                }
            }
            if(hidecounter===itemcollection.length)
            {
                group.style.display="none";
            }else{
                group.style.display="block";
            }

            });
        }