如何使用 jquery 和 firebase 监听删除子节点

Question

问题是：当我单击删除按钮时，数据会从 firebase 中删除，但我需要刷新页面，我如何在不刷新页面的情况下做到这一点

var userDataRef = firebase.database().ref("User/3N2f2rJSSAZmFOdZEeJdlsuEZam2").orderByKey();

      userDataRef.on('child_added', function(childSnapshot) {
     var key = childSnapshot.key;
        var childData = childSnapshot.val();         
        var title_val = childData.Title;
        var url_val = childData.Url;


        var myRow = $("<tr><td>" + title_val + "</td><td><a href=" + url_val + " target='_blank'> <button class='box'>GO</button></a></td><td><button class='box'>Delete</button></a></td></tr>");
        myRow.find("button").on("click", function(){
          var ref = firebase.database().ref("User/3N2f2rJSSAZmFOdZEeJdlsuEZam2")
          ref.child(key).remove();
        });
        $("#data").append(myRow);

我尝试了事件监听器 child_removed 和 child_changed 但没有运气，也许我没有把它放在正确的地方

var userDataRef = firebase.database().ref("User/3N2f2rJSSAZmFOdZEeJdlsuEZam2").orderByKey();

userDataRef.on('child_removed', function(childSnapshot) {
  var key = childSnapshot.key;
  var childData = childSnapshot.val();         
  var title_val = childData.Title;
  var url_val = childData.Url;


  // i dont know how to update the table after child_removed event

});

Answer 1

您需要确保myRow 包含它所基于的数据库节点的key。通常通过包含键作为您生成的顶级元素的id：

var myRow = $("<tr id='" + key + "'><td>" + title_val + "</td><td><a href=" + url_val + " target='_blank'> <button class='box'>GO</button></a></td><td><button class='box'>Delete</button></a></td></tr>");

顺便说一句：在现代 JavaScript 中，您可以使用更短的模板字符串：

var myRow = $(`<tr id='${key}'><td>${title_val}</td><td><a href='${url_val}' target='_blank'> <button class='box'>GO</button></a></td><td><button class='box'>Delete</button></a></td></tr>`);

现在有了这些信息，您可以在 child_removed 处理程序中查找正确的 HTML 元素，然后从页面中删除该元素：

userDataRef.on('child_removed', function(childSnapshot) {
  var key = childSnapshot.key;    

  $('#'+key).remove();    
});