javascript - Duplicate DOM element when i changes database data

Question

i have js like this :

function addItemsToList(name){

    var categorylisting = document.querySelectorAll(".nav-item")
    for(var i = 0; i < categorylisting.length; i++){
        categorylisting[i].remove();
    }

    var ul = document.getElementById('list');
    var li = document.createElement('li');
    li.className = "nav-item";

    var a = document.createElement('a');
    a.className = "nav-link";
    a.setAttribute("data-toggle", "tab");
    a.setAttribute("href", "#");
    a.setAttribute("role", "tab");
    a.setAttribute("aria-controls","overview");
    a.setAttribute("aria-selected","true");
    a.innerHTML = name;
    li.appendChild(a);

    ul.appendChild(li);
}

function FetchAllData(){
    firebase.database().ref('Category').on('value', function(snapshot){
        snapshot.forEach(
            function(ChildSnapshot){
                let name = ChildSnapshot.val().name;
                addItemsToList(name)
            }
        );
    });
}

why remove() not working every time i change database data, DOM element was duplicate, not deleting latest DOM element ?

EDIT

now it deleted, but just show last data from database, the frist data until one data before last data is not showing

question from:https://stackoverflow.com/questions/65838182/duplicate-dom-element-when-i-changes-database-data

Answer 1

Waitting for answers