检索多个firebase对象

Question

所以我正在一个web应用程序。基本上，我已经获得了以下代码，但是如何删除单击删除按钮时提取的每个员工？我还可以如何在删除小孩时更新列表。例如，现在如果我添加一个孩子，表格会自动更新新的孩子而不刷新页面。

var rootRef = firebase.database().ref().child("Balkar/Employees"); 
rootRef.on('child_added', snap => { 
    var id = snap.child("ID").val(); 
    var name = snap.child("Name").val(); 
    var email = snap.child("Email").val(); 

    $("#table_body").append("<tr><td>" + id + "</td><td>" + name + "</td> <td>" + email + 
          "</td><td><button>Remove</button></td></tr>"); 
}); 

<h1>All Employees</h1> 
    <table> 
     <tr> 
      <th>Employee ID</th> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Remove</th> 
     </tr> 
     <tbody id="table_body"></tbody> 
    </table> 

编辑：

var rootRef = firebase.database().ref().child("Balkar/Employees"); 

rootRef.on('child_added', snap => { 
    var id = snap.child("ID").val(); 
    var key = snap.key; 
    var name = snap.child("Name").val(); 
    var email = snap.child("Email").val(); 
    var btn = "<button id='removeEmployee' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>Remove</button>"; 

    $("#table_body").append("<tr id='"+key+"'><td>" + id + "</td><td>" + name + "</td> <td>" + email + 
          "</td><td><button>" + btn + "</button></td></tr>"); 

    $("#removeEmployee").click(
    function(){ 
     rootRef.on('child_removed', snap => { 
     var key = snap.key; 
     $('#'+key).remove(); 
     }); 
    } 
); 

}); 

Answer 1

要当一个项目被删除更新列表，侦听child_removed活动，并通过查找该项目的关键：

rootRef.on('child_added', snap => { 
    var id = snap.child("ID").val(); 
    var key = snap.key; 
    var name = snap.child("Name").val(); 
    var email = snap.child("Email").val(); 

    $("#table_body").append("<tr id='"+key+"'><td>" + id + "</td><td>" + name + "</td> <td>" + email + 
          "</td><td><button>Remove</button></td></tr>"); 
    }); 
}); 
rootRef.on('child_removed', snap => { 
    var key = snap.key; 
    $('#'+key).remove(); 
}); 

Answer 2

首先，您正在创建具有相同ID的多个删除按钮。情况并非如此。其次，您需要将密钥与每个按钮相关联，以便当用户点击其中一个按钮时，您知道要删除哪个项目。以下代码应该有所帮助

var rootRef = firebase.database().ref().child("Balkar/Employees"); 

rootRef.on('child_added', snap => { 
    var id = snap.child("ID").val(); 
    var key = snap.key; 
    var name = snap.child("Name").val(); 
    var email = snap.child("Email").val(); 
    var btn = "<button key='"+ key +"' class='removeEmployee mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>Remove</button>"; 

    $("#table_body").append("<tr id='"+key+"'><td>" + id + "</td><td>" + name + "</td> <td>" + email + 
          "</td><td>" + btn + "</td></tr>"); 

}); 

// now this click handler can be (should be) moved outside 'child_added' callback 
    $('#table_body').on('click', ".removeEmployee", function(){ // note: using 'removeElement' as class, not as id 
    var key = $(this).attr('key'); 
    var itemToRemove = rootRef.child(key); 
    itemToRemove.remove() 
    .then(function() { // removed from Firebase DB 
    console.log("Remove succeeded.") 
    }) 
    .catch(function(error) { 
    console.log("Remove failed: " + error.message) 
    }); 

    }); 
// keeping this separate so that even if the item is removed by any other means (e.g.- directly from server console) this UI will remain in sync 
rootRef.on('child_removed', function(snap) { 
    var key = snap.key; 
    $('#'+key).remove(); 
}); 

裁判：https://firebase.google.com/docs/reference/js/firebase.database.Reference#remove