Как сделать фильтрацию при помощи input type number?

Question

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

Как реализовать фильтр на основе input type="number", при условии если значение в поле ввода input больше указанного в блоке, то блок исчезал? Визуализирую для понимания на простом примере: https://jsfiddle.net/2ep0aqv6/

Answer 1

[0xD34F]

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

const input = document.querySelector('input');
const itemClass = 'word';
const blockClass = 'block';

Слушаем событие input, сравниваем значения, поднимаемся к блоку и переключаем его видимость:

input.addEventListener('input', e => {
  const val = +e.target.value;

  document.querySelectorAll(`.${itemClass}`).forEach(n => {
    n.closest(`.${blockClass}`).hidden = +n.innerText < val;
  });
});

или

.hidden {
  display: none;
}

input.oninput = function() {
  const val = Number(this.value);

  for (const n of document.getElementsByClassName(itemClass)) {
    let block = n;
    while (!(block = block.parentNode).classList.contains(blockClass)) ;
    block.classList.toggle('hidden', Number(n.textContent) < val);
  }
};