Как убрать заголовок блока в котором нет элементов?

Question

[Евгений Драган]

Здравствуйте! Есть блок в котором расположены карточки и заголовок блока. Сами карточки убираются с помощью фильтра к ним применяется класс hideoffer. Как убрать заголовок блока если в нем нет карточек? Пример кода:

<div class="block">
<h1 class="h1_">заголовок блока</h1>
<div class="offer_">Карточка 1</div>
<div class="offer_">Карточка 2</div>
<div class="offer_">Карточка 3</div>
<div class="offer_">Карточка 4</div>
<div class="offer_">Карточка 5</div>
</div>

.hideoffer{
display: none;
}

Comments

[Andrey Vasilev]

обратиться к блоку, если в блоке нету <div class="offer_">Карточка n</div> , то добавить класс hidden блоку

[Александр]

Как вариант

document.addEventListener("DOMContentLoaded", function() {
   var offers = document.querySelectorAll(".offer_");
   var visibleOffers = 0;
   for (var i = 0; i < offers.length; i++) {
      if (offers[i].textContent.trim() !== "") {
         visibleOffers++;
      }
   }
   if (visibleOffers == 0) {
      document.querySelector(".h1_").style.display = "none";
   }
});

Или так

document.addEventListener("DOMContentLoaded", function() {
   var offers = Array.from(document.querySelectorAll(".offer_"));
   if (offers.every(offer => offer.textContent.trim() === "")) {
      document.querySelector(".h1_").style.display = "none";
   }
});

Answer 1

[HardBot]

document.querySelectorAll('.block').forEach(block => {
     if(!(block.querySelector('.offer_'))) block.removeChild(block.querySelector('.h1_')) 
})