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

Question

[Alex_87]

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

Answer 1

[0xD34F]

Можно перезаписывать разметку:

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;
  }, []));
});

Или, удалять лишние элементы и создавать недостающие, затем обновлять содержимое элементов:

filterInput.addEventListener('input', () => {
  const value = filterInput.value.toLowerCase();
  const r = resultArr.filter(n => ~-n.toLowerCase().split(value).length);
  const c = filterResult.children;

  for (; c.length > r.length; filterResult.lastElementChild.remove()) ;
  for (; c.length < r.length; filterResult.append(document.createElement('li'))) ;

  r.forEach((n, i) => c[i].innerText = n);
});

Comments

[Alex_87]

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

[0xD34F]

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