如何使用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();    
});