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

Question

[Im p3l]

Как сделать, чтобы если при поиске станции в ветке метро ничего не найдено, то эта ветка полностью скрывалась? Сейчас показывает станции удовлетворяющие поиску.

Comments

[Alex]

если при поиске станции в ветке метро не находилась станция, то эта ветка полностью скрывалась?

Вот напишите дословно это же, только на JavaScript :)

Answer 1

[0xD34F]

$('.search').on('input', function() {
  const search = $(this).val().trim().toLowerCase();

  $('.metro-line__item')
    .hide()
    .filter((i, n) => $('.metro__name', n).text().toLowerCase().includes(search))
    .show();

  $('.metro-line')
    .show()
    .not(':has(.metro-line__item:visible)')
    .hide();
});

или

.hidden {
  display: none;
}

document.querySelector('.search').addEventListener('input', e => {
  const search = e.target.value.trim().toLowerCase();

  document.querySelectorAll('.metro-line__item').forEach(n => {
    const name = n.querySelector('.metro__name').textContent.toLowerCase();
    n.classList.toggle('hidden', !name.includes(search));
  });

  document.querySelectorAll('.metro-line').forEach(n => {
    n.classList.toggle('hidden', !n.querySelector('.metro-line__item:not(.hidden)'));
  });
});