Как скрыть блок, внутри которого находится блок с определённым классом?

Question

[Os Letnik]

Есть вот такая конструкция:

<div class="item">
  <div>
    <div></div>
  </div>
</div>
<div class="item">
  <div>
    <div class="hidden"></div>
  </div>
</div>

Нужно скрыть блок .item в котором находится блок .hidden.

Answer 1

[0xD34F]

О каких классах идёт речь:

const outerClass = 'item';
const innerClass = 'hidden';

Как скрыть элемент:

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

Скрываем:

document.querySelectorAll(`.${innerClass}`).forEach(n => {
  if (n = n.closest(`.${outerClass}`)) {
    hide(n);
  }
});

// или

for (const n of document.getElementsByClassName(outerClass)) {
  if (n.querySelector(`.${innerClass}`)) {
    hide(n);
  }
}

UPD. Наконец-то дождались, теперь js тут использовать необязательно:

.item:has(.hidden) {
  display: none;
}

Comments

[Os Letnik]

Спасибо за правку и за ответ)