How to get result only instead of the result apend to the element?

user_14353069 0
Viewed 38

I want to return the data that matches the input value only.

But in this code, the result will apend after the data.

I'm stuck in list.append(div);

const list = document.querySelector(".list");
const filterInput = document.querySelector("#filter-input");
const data = [{name: "abc"}, {name: "adb"}, {name: "cab"}];

renderData(data)

function renderData(data) {
    data.forEach(item => {
        const div = document.createElement("div");
        div.setAttribute("class", "item");
        div.innerHTML = `<div class="name">${item.name}</div>`;
        list.append(div);
    })
}

filterInput.addEventListener("input", e => {
    const keyword = e.target.value;
    let filteredData = data.filter(item => {
        return item.name.includes(keyword);
    });

    renderData(filteredData);
})
<input type="text" id="filter-input">
<div class="list"></div>

javascript
1 Answers

Clear the list's innerHTML when rendering to remove previously appended elements:

const list = document.querySelector(".list");
const filterInput = document.querySelector("#filter-input");
const data = [{name: "abc"}, {name: "adb"}, {name: "cab"}];

renderData(data)

function renderData(data) {
    list.innerHTML = ""; //<-- clear innerHTML, remove appended elements
    data.forEach(item => {
        const div = document.createElement("div");
        div.setAttribute("class", "item");
        div.innerHTML = `<div class="name">${item.name}</div>`;
        list.append(div);
    })
}

filterInput.addEventListener("input", e => {
    const keyword = e.target.value;
    let filteredData = data.filter(item => {
        return item.name.includes(keyword);
    });

    renderData(filteredData);
})
<input type="text" id="filter-input">
<div class="list"></div>

user_142512210
Related