Fire-base更新后，从网站表中删除旧数据

Question

我正在使用Fire-base更新网站表。在将数据从数据库实时添加到表中时，它非常有用。唯一的挫折是，从数据库中删除数据后，它仍然会反映在网站表中，除非或直到重新加载页面为止，这是我试图避免的。

目前，我已经尝试使用child_removed来查看它是否响应任何命令，但是我没有太多运气。

// web app's Firebase configuration

var firebaseConfig = {

...

};

// Initialize Firebase

firebase.initializeApp(firebaseConfig);

var database = firebase.database().ref().child('basketball');

//if a child is added add to webiste table

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

    if(snapshot.exists()){

        var content = '';

        snapshot.forEach(function(data){

            var val = data.val();

            content +='<tr>';

            content +='<td class=" align-middle text-center">';

            content +='<span class="user-initials bg-success-light25 text-success">FB</span>';

            content +='</td>';

            content +='<td class="align-middle">';

            content +='<small class="text-muted weight-300">' + val.sport + '</small>';

            content +='<div><a id="calccall" href="#" class="weight-400">' + val.home_team + ' vs ' + val.away_team + '</a></div>';

            content +='</td>';

            content +='<td class="align-middle">';

            content +='<div class="weight-400">' + val.market + '</div>';

            content +='</td>';

            content +='<td class="align-middle"><span class="material-icons align-middle md-18 text-success">expand_less</span>' + val.arbitrage + '%</td>';

            content +='<td class="align-middle text-right">' + val.game_time + '</td>';

            content += '</tr>';

        });

        $('#test_table').append(content)

    }

});

预期的结果是，一旦在行基础数据库中删除了行，就会从网站表中删除行

Answer 1

每当要basketball更改的数据更改时，Firebase都会使用下的所有数据的新快照再次调用您的回调basketball。在此方法中，您将重建整个HTML内容，然后使用以下命令将其附加到表中：$('#test_table').append(content)因此，如果您从表中的3个子节点开始，那么您正在为此构建HTML并将其添加到表中，从而使其变为：row1row2row3现在，如果您删除最后一行，您的回调将再次触发，并将剩余数据添加到表的末尾，因此您将获得：row1row2row3row1row2要仅显示最新状态，您需要替换现有的HTML。最简单的更改是致电：$('#test_table').html(content)使用此代码，第二次触发回调后，输出将如下所示：row1row2