Как динамически скрывать элементы списка js?

Question

[dmitriu256]

Есть задача сделать живой поиск по городам.
Данные берем из API Новой Почты
Что есть на данный момент:
На событие input навешан AJAX запрос к серверу, который успешно выполняется и выводиться список городов. Если я ввожу новые значение в строке поиска старые результаты остаются в списке.
Мой код

inp.addEventListener('input', function(){

        if(this.value.trim() !== ''){
            let xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://api.novaposhta.ua/v2.0/json/');

            xhr.setRequestHeader('Content-type', 'application/json; charset = utf-8');

            let val = this.value;

            let obj = {
                "apiKey": key,
                "modelName": "Address",
                "calledMethod": "searchSettlements",
                "methodProperties": {
                    "CityName": val,
                    "Limit": 5
                }
            };
            xhr.send(JSON.stringify(obj));

            xhr.addEventListener('readystatechange', function () {
                if (xhr.readyState < 4) {
                    console.log('Ожидание');
                } else if (xhr.readyState === 4 && xhr.status === 200) {
                    let obj = JSON.parse(xhr.response);

                    for(let i = 0; i < obj.data[0].Addresses.length; i++){

                        let city = obj.data[0].Addresses[i].MainDescription;
                        let type = obj.data[0].Addresses[i].SettlementTypeCode;
                        let area = obj.data[0].Addresses[i].Area;
                        let warhouses = obj.data[0].Addresses[i].Warehouses;

                            if(obj.data[0].Addresses[i].MainDescription.search(val) == -1 ){
                              
                                let li = document.createElement('li');
                                li.innerHTML = `Тип: ${type} ${city} Область: ${area} Количество отделений: ${warhouses}`;
                                ul.append(li);
                            }else{ 
//Как правильно в этом месте удалить старые результаты?
                                /*
                                let list = document.querySelectorAll('#list li');
                                list.forEach(function(elem){
                                  elem.style.display = 'none';
                                });
                                */
                            }
                        }
                    } else {
                    console.log('My error');
                }
            });
        }
    });

Буду благодарен за ответы
Примечание есть полностью рабочий код но со статическими данными (берем из списка li на странице)
Как адаптировать данный код под задачу с API?

input.addEventListener('input', function () {
        let val = input.value.trim();

        if(val !== ''){
            list.forEach(function(elem){
              if(elem.innerHTML.search(val) == -1) {
                  elem.style.display = 'none';
              }else{
                  elem.style.display = 'block';
              }
            });
        }else{
            list.forEach(function(elem){
                    elem.style.display = 'block';
            });
        }
   });
});

Answer 1

[Макс]

....
let obj = JSON.parse(xhr.response);
ul.innerHTML = '';
....

Сразу после каждого ответа API очищаете список полностью и добавляете в него новые элементы.

Comments

[dmitriu256]

Спасибо! Действительно намного проще.
Сам придумал такую реализацию

function clerarList(){
    let list = document.querySelectorAll('#list li');
    list.forEach(function (elem) {
        elem.remove();
    });
}

[Макс]

dmitriu256, для UI\LI сработает, но через ul.innerHTML = ''; более универсально получается. Можно любые блоки очищать и никакого цикла не надо.