子を関連付けられたキーで削除します。

Question

これまでのところ、次のコードがありますが、削除ボタンをクリックすると子は削除されません。私は警告文を追加しようとしたため、クリック機能が起動されていないようで、動作しません。

<table id="removeTable" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"> 
<thead> 
<tr> 
<th>Employee ID</th> 
<th>Name</th> 
<th>Email</th> 
<th>Remove</th> 
</tr> 
</thead> 
<tbody id="table_body"></tbody> 
</table> 

var rootRef = firebase.database().ref().child("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><button>" + btn +"</button></td></tr>"); 

}); 

$("#removeEmployee").click(
    function(){ 
    alert(); 
    } 
); 

// now this click handler can be (should be) moved outside 'child_added' callback 
    $(".removeEmployee").click(function(){ // note: using 'removeElement' as class, not as id 
    alert("clicked!"); 
    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(); 
}); 

Answer 1

あなたの問題はfirebaseとは関係ありません。

JQueryは、動的に作成されたコンテンツのクリックイベントを自動的にフックアップしません。それらのクリックハンドラを手動で追加する必要があります。これは、新しい要素を作成するときに最適です。

// wrap in a jquery object 
var btn = $("<button key='"+ key +"' class='removeEmployee mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>Remove</button>"); 

// then add a click event handler to it 
btn.on('click', function() { 
    var key = $(this).attr('key'); 
    alert("clicked! " + key); 
}); 

// then add it to the table 
$("#table_body").append("<tr id='"+key+"'><td>" + id + "</td><td>" + name + "</td> <td>" + email + "</td><td><button>" + btn +"</button></td></tr>"); 

Answer 2

は、なぜあなたは「文書」の助けによってのみ、ボタンが存在する場合にトリガしていると、あなたのハンドラをアタッチする.onメソッドを使用していませんか？

$(document).on('click', ".removeEmployee", function(){ 
    alert('My text : ' + $(this).text()); 
}); 

（ところで、あなたは要素のidで選択するために使用される「＃」でボタンを選択しようとしている。しかし、あなたが使用する必要があるので、removeEmployeeはCSSクラスである「.removeEmployee」）

ここ

は、要素の前に作成されたハンドラのデモンストレーションです：

console.log("Attaching handler"); 
 
setTimeout(function() { 
 
    $(document).on('click', ".removeEmployee", function() { 
 
    alert('My text : ' + $(this).text()); 
 
    }); 
 
    console.log("Creating the button"); 
 
    setTimeout(function() { 
 
    $('#container').append('<button class="removeEmployee">Remove</button>'); 
 
    console.log("Ready for click!") 
 
    }, 1000); 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"></div>