Как обновить список после fetch запроса?

Question

[serega 2070]

Ребят привет, подскажите плиз как реализовать чтобы при каждом запросе обновлялся список, а не добавлял в него новый результат? пример тут

js примера

let apiTagsLink = 'https://topceramica.ru/wp-json/wp/v2/posts/?search='
        let inputTags = document.getElementById('viewList')
        let reqList = document.createElement('ul')
        let parentUl = inputTags.parentNode

        inputTags.addEventListener("input", inputTextTags)

        function inputTextTags() {
            let request = inputTags.value
            fetch(apiTagsLink + request)
                .then((response) => {
                    // console.log(response)
                    return response.json()
                })
                .then((data) => {
            console.log(data)
                    
                        data.forEach(element => {
                            console.log(element.title.rendered)
                           
                                reqList.innerHTML += '<li>'+element.title.rendered+'</li>'
                                parentUl.insertBefore(reqList, inputTags)    
                        })
                    
                    
                    
                })
        }

Comments

[Dima Polos]

Глянул кратко, но кажется, document.createElement('li')... должен помочь ;)

Answer 1

[Spartak (Web-StyleStudio)]

...
.then((data) => {
	console.log(data);
	var list = '';

	data.forEach(element => {
		console.log(element.title.rendered);

		list += '<li>'+element.title.rendered+'</li>';
	})

	reqList.innerHTML = list;
	parentUl.insertBefore(reqList, inputTags);
})

Answer 2

[Gary_Ihar]

Тебе надо почистить свою ul. Добавь в последнем .then в самое начало reqList.innerHTML = '';

Comments

[Rerurk]

Вот всегда мучал вопрос делать el.remove или чистить с помощью html="". Ведь второй способ не чистит document

[Gary_Ihar]

Rerurk, я только изучаю JS и не могу более глубоко разъяснить этот момент:) Автор использовал иннерХтмл и я опираясь на это пытался решить вопрос

Answer 3

[serega 2070]

В итоге взял ответ Spartak и добавил то что посоветовал Gary_lhar reqList.innerHTML = '', то что нужно) спасибо

обновил на codepen код