Как сделать фильтр динамических элементов на чистом js?

Question

[Stalk007]

Привет! Я нашел как сделать фильтр, но он работает только для элементов которые уже прописаны, а хотелось бы чтобы фильтровал и и созданные пользователем, не подскажите с помощью чего можно сделать?
Лучше такого кода не придумал https://codepen.io/stalk000/pen/KKgZMjJ
Поле для создание новых элементов в шторке, чтобы шторка появилась нужно подвести курсор к черной линии.

Answer 1

[Somewhere Intech]

сами статику создали
const box = document.querySelectorAll('.box');
для динамики нужно, по хорошему, добавлять в массив box созданные динамически элементы

const box = [...document.querySelectorAll('.box') ];
Application.whenUserAdd( item => box.push(item))

либо же в хэндлере события переопределять box каждый раз

document.querySelector('nav').addEventListener('click', event => {
      let box = document.querySelectorAll('.box');

Comments

[Stalk007]

Спасибо!

Answer 2

[Bavashi]

Первое что бросается в глаза это "лесенка". Переделайте через switch. Далее, можно обернуть листнер в функцию и апдейтить ее при новом добавлении.

Код

let read = document.querySelector('.read');
let inMenu = document.querySelector('.in-menu');
let teg = document.querySelector('.teg');
let content = document.querySelector('.block-cover')
read.onclick = () => {
    if (teg.value === 'alizarin') {

        content.insertAdjacentHTML('beforeend',
        `<div class="col-auto box alizarin">
                  <div>${inMenu.value}</div>
                  <div> Тег: ${teg.value}</div>
                </div>`)
      updateListener();
    } else if (teg.value === 'sunflower') {
        content.insertAdjacentHTML('beforeend',
        `<div class="col-auto box sunflower">
                  <div>${inMenu.value}</div>
                  <div> Тег: ${teg.value}</div>
                </div>`)
      updateListener();
    } else if (teg.value === 'emerland') {
        content.insertAdjacentHTML('beforeend',
        `<div class="col-auto box emerland">
                  <div>${inMenu.value}</div>
                  <div> Тег: ${teg.value}</div>
                </div>`)
      updateListener();
    }
    else if (teg.value === 'wisteria') {
        content.insertAdjacentHTML('beforeend',
        `<div class="col-auto box wisteria">
                  <div>${inMenu.value}</div>
                  <div> Тег: ${teg.value}</div>
                </div>`)
        updateListener();
    } else {
        alert('error');
    }
    
}

let box = document.querySelectorAll('.box');

function updateListener() {
  box = document.querySelectorAll('.box');
  document.querySelector('nav').addEventListener('click', event => {
    console.log(box.length);
    if (event.target.tagName !== 'LI') return false;

    let filter = event.target.dataset['f'];

    box.forEach(elem => {
      elem.classList.remove('hide');
      if (!elem.classList.contains(filter) && filter !== 'all') {
        elem.classList.add('hide');
      }
    })
  })
};
updateListener();

Comments

[Stalk007]

Спасибо!