Как удалять предыдущий DOM элемент при появлении нового элемента контейнера?

Question

[Alex_87]

Добрый вечер! При вводе в input название города, в контейнер из массива добавляется список город, соответствующий введённой в input символам. Мне необходимо, чтобы при введении каждой следующей буквы, элементы li полностью обновлялись. Помогите пожалуйста этого добиться:
https://codepen.io/Alexei_87/pen/gOwpwzL?editors=1010

Answer 1

[0xD34F]

Вместо filterInput.addEventListener('keyup',... пусть будет

filterInput.addEventListener('input', function() {
  const value = this.value.toLowerCase();

  filterResult.innerHTML = resultArr
    .filter(n => n.toLowerCase().includes(value))
    .map(n => `<li>${n}</li>`)
    .join('');
});

или

filterInput.addEventListener('input', e => {
  const value = e.target.value.toLowerCase();

  filterResult.replaceChildren(...resultArr.reduce((acc, n) => {
    if (n.toLowerCase().indexOf(value) !== -1) {
      (acc[acc.length] = document.createElement('li')).textContent = n;
    }
    return acc;
  }, []));
});

Comments

[Alex_87]

Очень красиво сделано! Спасибо! А как при очищения поля, очищать список с названиями городов?
Пробовал в событии input прописать следующий код, но ничего не получилось:
if(!filterValue){
filterResult.innerHTML = '';
}

[0xD34F]

Alex_87, прежде чем я отвечу на этот вопрос, вы займётесь соблюдением пункта 3.4 правил.