如何清除Firebase foreach内部的div

Question

当我从用户div中选择另一个“用户”时，我正在尝试清除消息框div。 但是，当我尝试这样做时，只有来自Firebase的最新消息才进入聊天气泡div。

$('div.chat_list').on('click', function () { //populate chatbox and determine clicked user

     var $cl = $(this).closest('div.chat_list');
     var $chtName = $cl.attr('id');
     $('div.chat_list').removeClass("active_chat");
     $($cl).addClass("active_chat");
     var thread = firebase.database().ref("messages/" + brgy + "/" + key).orderByChild("chatroom").equalTo($chtName); //populates chat list from that barangay (names)
     thread.on("value", snaps => {
         if (snaps.exists()) { //populate chat entries for users
             snaps.forEach(snaps => {
                 username = snaps.child("uid").val();
                 message = snaps.child("message").val();
                 date = snaps.child("date").val();
                 time = snaps.child("time").val();
                 console.log(username + ": " + message);

                 if (username != key) { //sets the chat bubble type
                     div1 = "outgoing_msg";
                     div2 = "sent_msg";
                 } else {
                     div1 = "incoming_msg";
                     div2 = "recieved_msg";
                 }

                 $(".msg_history").empty();
                 $(".msg_history").append("<div class='" + div1 + "'>" +
                     "<div class='" + div2 + "'>" +
                     "<div class='received_withd_msg'>" +
                     "<p>" + message + "</p>" +
                     "<span class='time_date'> " + time + " | " + date + " </span>" +
                     "</div></div></div>");

             });
         }

     });

 })

这一行， $(".msg_history").empty(); 是导致问题的原因。

我想在这里实现的是，当我选择要与之聊天的新用户时，我希望有一个干净的“聊天室”。 这就是为什么我有.empty标签，但这样做只会附加最后一条消息。 并非所有消息都发送到聊天气泡div。

Answer 1

尝试在将数据附加到div之前先清空div，这样就不会在每次迭代时将其清除。
您的代码应如下所示：

$('div.chat_list').on('click', function () { //populate chatbox and determine clicked user

     var $cl = $(this).closest('div.chat_list');
     var $chtName = $cl.attr('id');
     $('div.chat_list').removeClass("active_chat");
     $($cl).addClass("active_chat");
     var thread = firebase.database().ref("messages/" + brgy + "/" + key).orderByChild("chatroom").equalTo($chtName); //populates chat list from that barangay (names)
     thread.on("value", snaps => {
         if (snaps.exists()) { //populate chat entries for users
             // empty the container first
             $(".msg_history").empty();
             // then populate data 
             snaps.forEach(snaps => {
                 username = snaps.child("uid").val();
                 message = snaps.child("message").val();
                 date = snaps.child("date").val();
                 time = snaps.child("time").val();
                 console.log(username + ": " + message);

                 if (username != key) { //sets the chat bubble type
                     div1 = "outgoing_msg";
                     div2 = "sent_msg";
                 } else {
                     div1 = "incoming_msg";
                     div2 = "recieved_msg";
                 }

                 $(".msg_history").append("<div class='" + div1 + "'>" +
                     "<div class='" + div2 + "'>" +
                     "<div class='received_withd_msg'>" +
                     "<p>" + message + "</p>" +
                     "<span class='time_date'> " + time + " | " + date + " </span>" +
                     "</div></div></div>");

             });
         }

     });

 })