Question

旧记录和新记录一起显示。

我将内容添加到数据库，并在添加内容后立即显示它（按钮事件侦听器）。但是当显示内容时，它显示为-

Content1
Content2

（这是旧的内容列表）

Content1
Content2
Content3

页面显示内容1-2和内容1-3。

它应该只显示-

Content1
Content2
Content3

这是正确的列表和所需的输出。

当我刷新页面并从数据库本身获取列表时，将显示正确的列表。

代码-

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);
    }

  });

})();

删除旧列表并显示新列表

1 个答案: