複数の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> 

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

項目が削除されたときに、リストを更新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(); 
}); 

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