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

Question

我正在使用Fire-base更新网站表。在将数据从数据库实时添加到表中时，它非常有用。唯一的挫折是，从数据库中删除数据后，它仍然会反映在网站表中，除非或直到重新加载页面为止，这是我试图避免的。目前，我已经尝试使用child_removed来查看它是否响应任何命令，但是我没有太多运气。// web app's Firebase configurationvar firebaseConfig = {...};// Initialize Firebasefirebase.initializeApp(firebaseConfig);var database = firebase.database().ref().child('basketball');//if a child is added add to webiste tabledatabase.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并将其添加到表中，从而使其变为：

row1

row2

row3

现在，如果您删除最后一行，您的回调将再次触发，并将剩余数据添加到表的末尾，因此您将获得：

row1

row2

row3

row1

row2

要仅显示最新状态，您需要替换现有的HTML。最简单的更改是致电：

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

使用此代码，第二次触发回调后，输出将如下所示：

row1

row2