Проверить наличие элемента в блоке с помощью JS

Question

Есть блок с возможными 3 баннерами (элементами с разными классами). Нужно сделать так чтоб когда в нем присутствует баннер_3, первые 2 не отображались, и если присутствует только 1 и 2, то чтоб баннер_1 не отображался. Можно с добавлением класса либо просто стиля "display: none"

<div class="block">
    <div class="banner1">Баннер_1</div>
    <div class="banner2">Баннер_2</div>
    <div class="banner3">Баннер_3</div>
</div>

Answer 1

.block>.banner3~.banner2,
.block>.banner3~.banner1,
.block>.banner2~.banner1 {
  display: none;
}

<div class="block">
  <div class="banner3">Баннер_3</div>
  <div class="banner2">Баннер_2</div>
  <div class="banner1">Баннер_1</div>
</div>

Answer 2

.block>div[class^='banner']:not(:last-child) {
  display: none;
}

<div class="block">
  <div class="banner1">Баннер_1</div>
  <div class="banner2">Баннер_2</div>
  <div class="banner3">Баннер_3</div>
</div>

Answer 3

function fBannerShow() {
  let elBanner = document.querySelector('div.block > div.banner3') ||
    document.querySelector('div.block > div.banner2') ||
    document.querySelector('div.block > div.banner1');

  [...document.querySelectorAll('div.block > div')].forEach(function(el) {
    el.style.display = (el !== elBanner) ? 'none' : '';
  })
}

window.onload = fBannerShow;

<div class="block">
  <!--div class="banner1">Баннер_1</div-->
  <div class="banner2">Баннер_2</div>
  <div class="banner3">Баннер_3</div>
</div>

БЛОГ НА HUSL

Проверить наличие элемента в блоке с помощью JS

Ответы (3 шт):