JavascriptからHTMLの要素を削除するには？

Question

私はHTMLページに要素を追加するjavascript関数を持っています。ユーザーがHTML内のボタンをクリックすると、関連するHTMLコンテンツがページから削除されるという機能を追加したいと思います。

$("#keywords").append("<td><img src=\"images/delete.png\" class=\"delete_filter\" /> " + id + "</td>"); 

上記のコードは、HTMLに要素を追加する方法です。この場合、ユーザーが添付された画像をクリックすると、<td><img src=\"images/delete.png\" class=\"delete_filter\" /> がHTMLから削除されます。要素が動的にそれが唯一の負荷に使用可能であった要素を見ているようclick()が動作しません追加されているので

$(".delete_filter").click(
function(){ 
    ($(this).parent()).remove(); 
}); 

Answer 1

を：

これは私が今、それが機能していないしているものです。

代わりにこれを試してみてください：

$("#myTable").delegate(".delete_filter", "click", function() { 
    $(this).parent().remove(); 
}) 

かのjQuery 1.7以降で

$("#myTable").on("click", ".delete_filter", function() { 
    $(this).parent().remove(); 
}) 

Answer 2

要素は、以下を試してみてください、あなたはあなたのイベントリスナーを設定する時点でHTMLの一部ではありません：

$('table').delegate('.delete_filter', 'click', function() { 
    $(this).parent().remove(); 
}); 

Answer 3

DOMエレメントの前にclickハンドラーを追加しているようですページに追加されました。したがって、それはその要素に束縛されていません。 onを使用してみてください代わりに

$('table').on('click', '.delete-filter', function() { 
    $(this).parent().remove(); 
}); 

on APIは、jQueryの1.7に新しいです。以前のバージョンを使用している場合は、live

$('table').delegate('.delete-filter', 'click', function() { 
    $(this).parent().remove(); 
}); 

Answer 4

を試してみてください。この

$(document).ready(function(){ 

    $("#keywords").append("<td><img src=\"images/delete.png\" class=\"delete_filter\" /> " + id + "</td>"); 

    $(".delete_filter").on("click", function(event) { 

    // Not sure why you had this section wrapped in a function() tag, wasn't necessary 
    $(this).parent().remove(); 

    }); 
}); 

Answer 5

はこれを試してみてくださいしてみてください：DOMに項目を追加後にイベントをバインドします。

$("#keywords").append("<td><img src=\"images/delete.png\" class=\"delete_filter\" /> " + id + "</td>"); 
$(".delete_filter").click(function() { 
    $(this).parent().remove(); 
}); 

Answer 6

試してみてください。

$('#keywords').on('click', '.delete_filter', function() { 
    $(this).parent().remove(); 

}); 

コードが実行されるとDELETE_FILTERクラスオブジェクトがまだ存在していないので、おそらくあなたのコードが動作しません。 on構文はそれを動的にバインドして動作するはずです。