Как отобразить блок «Нет элементов»?

Question

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

Здравствуйте! Подскажите, пожалуйста, как сделать чтобы при удалении всех блоков в div`e с классом elem_block появлялся блок с надписью "Нет элементов".

Я так понял что нужно проверить элементы с классом block на наличие класса fx_none, пробовал через .hasClass к сожалению не получилось.

Пример:
https://jsfiddle.net/0d8ukh9z/

Answer 1

[0xD34F]

$('.elem_block').on('click', '.dell', function() {
  $(this).closest('.block').addClass('fx_none');
  $('.no-res').toggleClass('fx_none', !!$('.block:not(.fx_none)').length);
});

или

document.addEventListener('click', e => {
  const btn = e.target.closest('.dell');
  if (btn) {
    btn.closest('.block').classList.add('fx_none');
    document.querySelector('.no-res').classList.toggle(
      'fx_none',
      !!document.querySelector('.block:not(.fx_none)')
    );
  }
});

UPD. Наконец-то дождались. Теперь можно сделать так:

• Класс fx_none вырезаем
  
• Элементам .no-res и .elem_block добавляем общую обёртку, какой-нибудь <div class="container">
  
• По кликам на .dell вместо добавления класса, скрывающего элементы, удаляем их по-настоящему:
  
  

  document.querySelectorAll('.dell').forEach(function(n) {
    n.addEventListener('click', this);
  }, e => e.target.closest('.block').remove());

• Прячем .no-res, если в .elem_block что-то есть:
  
  

  .container:has(.elem_block *) .no-res {
    display: none;
  }

  
  Если же удаление элементов не вариант, то прятать .no-res надо в том случае, если существует .block без класса, которые его скрывает:
  
  

  .container:has(.block:not(.fx_none)) .no-res {
    display: none;
  }