Удаление старого списка и отображение нового списка

Question

Старые и новые записи показываются вместе.

Я добавляю контент в БД, и он отображается, как только он добавлен (кнопка прослушивания событий). Но когда показывается контент, он показывается как -

• Content1
• Content2

(Это старый список содержимого)

• Content1
• Content2
• Content3

На странице отображаются Содержание 1-2 и Содержание 1-3.

Должен показывать только -

• Content1
• Content2
• Content3

Это правильный список и желаемый результат.

Правильный список отображается, когда я обновляю страницу, а список извлекается из самой БД.

* 1045 код-*

function showData() {



database.on("value", function (snapshot) {



    var listings = document.getElementsByClassName("contentClass");
    for (var j = listings.length; j < 0; j++) {
        listings[j].remove();
    }

    var dbData = snapshot.val();
    var keys = Object.keys(dbData);
    keys = keys.reverse();

    for (var i = 0; i < keys.length; i++) {

        var k = keys[i];
        var textContent = dbData[k].content;
        var timeContent = dbData[k].time;
        var dateContent = dbData[k].date;

        var newDiv = document.createElement("div");
        newDiv.classList.add("contentClass");
        var something = `
            <div class="dataDiv">
            ${textContent + "<br />" + timeContent + "<br />" + dateContent}
            </div>
        ` ;

        newDiv.innerHTML = something;
        content.appendChild(newDiv);

    }

})


}

showData();

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

Answer 1

Я бы заключил его в обертку и обновлял обертку каждый раз.

(function showData() {

  database.on("value", function (snapshot) {
    const wrapper = document.getElementsByID("wrapper");
    wrapper.innerHTML = '';

    var dbData = snapshot.val();
    var keys = Object.keys(dbData);
    keys = keys.reverse();

    for (var i = 0; i < keys.length; i++) {
      var k = keys[i];
      var textContent = dbData[k].content;
      var timeContent = dbData[k].time;
      var dateContent = dbData[k].date;

      var newDiv = document.createElement("div");
      newDiv.classList.add("contentClass");
      var something = `<div class="dataDiv">${textContent + "<br />" + timeContent + "<br />" + dateContent}</div>` ;

      newDiv.innerHTML = something;
      wrapper.appendChild(newDiv);
    }

  });

})();