Определите, все ли дочерние элементы скрыты, и спрячьте родительский элемент div, используя vanilla JS.

Question

Как видно из названия, я хочу создать фильтр, который скрывает элементы.Если все дети спрятаны, тогда паретн должен настроить себя так, чтобы не показывать ничего, только я не могу понять, как к нему подойти.Я попробовал ниже без удачи.

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

может быть, вы можете запустить две функции при нажатии клавиши.Можно было бы обнаружить состояние элементов в группе, которая обнаружит, скрыт ли весь элемент или нет.Мы можем немного отредактировать приведенный ниже код для большей эффективности.

Надеюсь, это результат того, что вы ожидаете, скриптовая ссылка: 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";
            }

            });
        }

Answer 2

Вам нужно что-то делать с родителями после итерации потомков, а не во время этого.

1. Получать потомков для каждого имеющегося у них родителя, а не целых элементов .kb-item.

2. Сравните длину детей и их длину в стиле display: none.

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"
    }
  })

Полный фрагмент кода :

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>