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

Рейтинг: 1Ответов: 2Опубликовано: 15.04.2023

Есть код главный контейнер .rew_serial. Если в этом контейнере нет класса .rew_serial_cont, то скрывать блок .rew_serial, а если есть, то показывать. Подскажите, как это реализовать в JS или CSS ?

<div class="rew_serial">
  <div class="rew_serial_cont">
    <div class="rew_serial_ing">
      <a href="#">
        <img class="con_img_bord" src="" alt="название">
      </a>
    </div>
    <div class="rew_serial_title"><a href="#">Название</a></div>
    <div class="rew_serial_serii">1 cезон, 1 cерия</div>
  </div>
</div>
css javascript
Источник: Stack Overflow на русском

Ответы

▲ 3Принят

На JS надёжно и универсально. Если изменением классов и DOM управляете Вы, то после каждого изменения, достаточно запускать следующую функцию:

document.querySelectorAll('.rew_serial').forEach(el => {
  el.style.display = (!el.querySelector('.rew_serial_cont')) ? 'none' : '';
});
.red { background: #f008 } .blue { background: #00f8 } .green { background: #0908 }
<div class="rew_serial red">
  <div class="rew_serial_cont">
    <div class="rew_serial_ing">
      <a href="#">
        <img class="con_img_bord" src="" alt="название">
      </a>
    </div>
    <div class="rew_serial_title"><a href="#">Название</a></div>
    <div class="rew_serial_serii">1 cезон, 1 cерия</div>
  </div>
</div>
<div class="rew_serial blue">
  <div class="not_rew_serial_cont"><!-- Другое имя класса или его отсутствие -->
    <div class="rew_serial_ing">
      <a href="#">
        <img class="con_img_bord" src="" alt="название">
      </a>
    </div>
    <div class="rew_serial_title"><a href="#">Название</a></div>
    <div class="rew_serial_serii">1 cезон, 2 cерия</div>
  </div>
</div>
<div class="rew_serial green">
  <div class="rew_serial_cont">
    <div class="rew_serial_ing">
      <a href="#">
        <img class="con_img_bord" src="" alt="название">
      </a>
    </div>
    <div class="rew_serial_title"><a href="#">Название</a></div>
    <div class="rew_serial_serii">1 cезон, 3 cерия</div>
  </div>
</div>

Если же структурой и атрибутами управляет сторонний скрипт, то не обойтись без наблюдателя, который будет запускать функцию при обнаружении изменений:

// Родительский элемент
const target = document.querySelector('.parent-rew_serial');
// За какими изменениями наблюдать
const config = {
  attributeFilter: ['class'],
  attributes: true,
  subtree: true
};
// Функция скрытия/показа
function fShowHide() {
  document.querySelectorAll('.rew_serial').forEach(el => {
    el.style.display = (!el.querySelector('.rew_serial_cont')) ? 'none' : '';
  });
}
fShowHide();
// Экземпляр наблюдателя с указанной функцией
const observer = new MutationObserver(fShowHide);
// Навешивание наблюдателя
observer.observe(target, config);
.red { background: #f008 } .blue { background: #00f8 } .green { background: #0908 }
<div class="parent-rew_serial">

  <div class="rew_serial red">
    <div class="rew_serial_cont">
      <div class="rew_serial_ing">
        <a href="#">
          <img class="con_img_bord" src="" alt="название">
        </a>
      </div>
      <div class="rew_serial_title"><a href="#">Название</a></div>
      <div class="rew_serial_serii">1 cезон, 1 cерия</div>
    </div>
  </div>
  <div class="rew_serial blue">
    <div class="not_rew_serial_cont"><!-- Другое имя класса или его отсутствие -->
      <div class="rew_serial_ing">
        <a href="#">
          <img class="con_img_bord" src="" alt="название">
        </a>
      </div>
      <div class="rew_serial_title"><a href="#">Название</a></div>
      <div class="rew_serial_serii">1 cезон, 2 cерия</div>
    </div>
  </div>
  <div class="rew_serial green">
    <div class="rew_serial_cont">
      <div class="rew_serial_ing">
        <a href="#">
          <img class="con_img_bord" src="" alt="название">
        </a>
      </div>
      <div class="rew_serial_title"><a href="#">Название</a></div>
      <div class="rew_serial_serii">1 cезон, 3 cерия</div>
    </div>
  </div>
  
</div>

В CSS воспользуйтесь псевдоклассом :has() (только обратите внимание на поддержку в браузерах):

.red { background: #f008 }
.blue { background: #00f8 }
.green { background: #0908 }

.rew_serial:has(> :not(.rew_serial_cont)) {
  display: none;
}
<div class="rew_serial red">
  <div class="rew_serial_cont">
    <div class="rew_serial_ing">
      <a href="#">
        <img class="con_img_bord" src="" alt="название">
      </a>
    </div>
    <div class="rew_serial_title"><a href="#">Название</a></div>
    <div class="rew_serial_serii">1 cезон, 1 cерия</div>
  </div>
</div>
<div class="rew_serial blue">
  <div class="not_rew_serial_cont"><!-- Другое имя класса или его отсутствие -->
    <div class="rew_serial_ing">
      <a href="#">
        <img class="con_img_bord" src="" alt="название">
      </a>
    </div>
    <div class="rew_serial_title"><a href="#">Название</a></div>
    <div class="rew_serial_serii">1 cезон, 2 cерия</div>
  </div>
</div>
<div class="rew_serial green">
  <div class="rew_serial_cont">
    <div class="rew_serial_ing">
      <a href="#">
        <img class="con_img_bord" src="" alt="название">
      </a>
    </div>
    <div class="rew_serial_title"><a href="#">Название</a></div>
    <div class="rew_serial_serii">1 cезон, 3 cерия</div>
  </div>
</div>

▲ 1

Меня опередили и сделали красивее, но я добавлю свои пол копеек, Так как я тоже новенький и для меня это челендж) И у меня Js код не форматируется тут почему то, не выставляется как надо...

const rew = document.querySelector('.rew_serial').querySelectorAll('.rew_serial_cont');
const rew_ser = document.querySelector('.rew_serial');

if(rew.length > 0){
    rew_ser.style.display = 'none';
}
.rew_serial {
  width: 200px;
  height: 150px;
  background: black;
 }
<div class="rew_serial" id="rew">
    <div class="rew_serial_cont">
      <div class="rew_serial_ing">
        <a href="#">
             <img class="con_img_bord" src="" alt="название">
        </a>
     </div>
        <div class="rew_serial_title"><a href="#">Название</a></div>
        <div class="rew_serial_serii">1 cезон, 1 cерия</div>
 </div>