Как очистить div, который находится внутри firebase foreach

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.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>");

             });
         }

     });

 })