Abrufen mehrerer Firebase-Objekte

Question

So arbeite ich an einer Web-App. Grundsätzlich habe ich den folgenden Code zu arbeiten, aber wie entferne ich jeden Mitarbeiter, der abgerufen wird, wenn auf die Schaltfläche Entfernen geklickt wird? Kann ich auch verwenden, wie mache ich die Liste aktualisiert, wenn ein Kind entfernt wird. Wenn ich beispielsweise jetzt ein Kind hinzufüge, aktualisiert die Tabelle es automatisch mit dem neuen Kind, ohne die Seite zu aktualisieren.

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> 

EDIT:

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

Um die Liste zu aktualisieren, wenn ein Element entfernt wird, für child_removed Ereignisse hören und das Einzelteil durch seine Schlüssel finden:

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

Zu allererst Sie erstellen mehrere Remove-Schaltflächen mit derselben ID. Das sollte nicht der Fall sein. Zweitens müssen Sie den Schlüssel mit jeder Schaltfläche verknüpfen, sodass Sie beim Klicken auf einen der Elemente wissen, welches Element entfernt werden soll. Der folgende Code sollte helfen.

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(); 
}); 

ref: https://firebase.google.com/docs/reference/js/firebase.database.Reference#remove