檢索多個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