Как скрыть родителя, если у детей определённое значение?

Question

[funkydance]

Есть такая разметка, родитель внутри него 5 div блоков и в последнем диве span со значением. У вложенных дивов классы убрал, чтоб чище разметку показать.

<div class="filter__item">
    <div>
          <div>
                  <div class="filter__properties-item ">
                            <div>
                                  <div>
                                         <span class="filter__checkgroup-count"> 0</span>
                                     </div>
                              </div>
                   </div>
                  <div class="filter__properties-item ">
                            <div>
                                  <div>
                                         <span class="filter__checkgroup-count"> 0</span>
                                     </div>
                              </div>
                   </div>
                  <div class="filter__properties-item ">
                            <div>
                                  <div>
                                         <span class="filter__checkgroup-count"> 0</span>
                                     </div>
                              </div>
                   </div>
        </div>
   </div>
</div>

Мне нужно сделать следующее. Перебрать все элементы filter__checkgroup-count и выяснить, если хотя бы один элемент имеет значение выше 0, то ничего не делать, а если все элементы имеют значение 0, то родителю filter__item навесить display: none; Нужно именно этому родителю навесить, так как их на странице может быть несколько. Именно на последнем этапе как навесить именно этому родителю класс затуп.

Answer 1

[0xD34F]

document.querySelectorAll('.filter__item').forEach(n => {
  n.style.display = Array
    .from(n.querySelectorAll('.filter__checkgroup-count'))
    .some(m => +m.innerText.trim())
      ? 'block'
      : 'none';
});

или

.hidden {
  display: none;
}

for (const n of document.getElementsByClassName('filter__item')) {
  n.classList.toggle('hidden', Array.prototype.every.call(
    n.getElementsByClassName('filter__checkgroup-count'),
    m => Number(m.textContent.trim()) === 0
  ));
}

Comments

[funkydance]

Спасибо большое вам и Rsa97 работает, теперь постараюсь понять, как всё работает это.

Answer 2

[Rsa97]

[...document.querySelectorAll('.filter__checkgroup-count')].forEach(
  (el) => {
    if (el.innerText.trim() === '0') {
      el.closest('.filter__item').classList.add('hidden');
    }
  },
);