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

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]

О каких элементах идёт речь:

const outerClass = 'filter__item';
const innerClass = 'filter__checkgroup-count';

Скрываем:

OUTER:
for (const n of document.getElementsByClassName(outerClass)) {
  for (const m of n.getElementsByClassName(innerClass)) {
    if (Number(m.innerText)) {
      continue OUTER;
    }
  }

  n.hidden = true;
  // или
  n.style.display = 'none';
  // или
  n.style.setProperty('visibility', 'hidden');
  // или
  n.style.cssText += 'opacity: 0';
  // или
  n.setAttribute('style', 'transform: scale(0)');
}

или

.hidden {
  display: none;
}

document.querySelectorAll(`.${outerClass}`).forEach(n => {
  n.classList.toggle('hidden', !Array.prototype.some.call(
    n.querySelectorAll(`.${innerClass}`),
    m => +m.textContent
  ));
});

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