jQueryは動的に追加して削除します

Question

私はこのコードを持っています。 作成された各行から「X」ボタン付きの「行追加」ボタンで作成された行を削除したいとします。 アイデアは何ですか？ ありがとう！あなたは、テーブル内の行を削除するために使用されている必要がありbuttonこのタイプの要素のみを前提としていること

$("#table").on("click", "button", function() { 
    $(this).closest("tr").remove(); 
}); 

注：jQueryの1.7以降を使用している場合

<script type="text/javascript"> 
$(function() { 
    $("#AddLine").click(function() { 
     var row = "<tr><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td><button>X</button></td></tr>"; 
     $("#table").append(row); 
    }); 
}); 
</script> 

<button id="AddLine">Add Line</button> 
    <table border="1px" id="table"> 
     <tr> 
      <td>First Name</td> 
      <td>Last Name</td> 
      <td>Email</td> 
     </tr> 
     <tr> 
      <td><input type=text /></td> 
      <td><input type=text /></td> 
      <td><input type=text /></td> 
     </tr> 
    </table> 

Answer 1

は、あなたはonメソッドを使用することができます。そうでない場合は、おそらく "X"ボタンにクラスを与え、それをセレクタで使用したいと思うでしょう。

ここには上記のworking exampleがあります。

あなたが代わりにdelegateメソッドを使用することができます1.7以上のjQueryを使用していない場合：あなたはjqueryの

の.closest("tr").remove();を使用することができます

$("#table").delegate("button", "click", function() { 
    $(this).closest("tr").remove(); 
}); 

Answer 2

あなたはjqueryのか、のいずれかの特定の生の最後の行を削除してみてくださいすることができます次

に従うようにテーブルには、最後の生

$('#table tr:last').remove(); 

を削除します

以下は削除されますのみ第二

$('#table tr:eq(1)').remove(); 

Answer 3

生あなたがクリックするのではなく、ライブイベントを使用する必要があります。

は、あなたがものを生成した際に使用され、（）次に、あなたはライブ

$("remove").live("click", function(){ 
    "find your row. Could be $(this).parents("tr") which searchs your parent until it hits tr and then remove it by using .remove()" 
    return false; 
}); 

を行うことができます代わりに生成されたHTML

<a class="remove" href="#">X</a> 

にこれを追加することができ、そのため、あなたはその1を選択する必要があります。 お手伝い願います！

Answer 4

各行にidを割り当て、クリックするとそのIDの行を削除するボタンを追加します。

<script type="text/javascript"> 
var rowIndex=0; 
$(function() { 
    $("#AddLine").click(function() { 
     rowIndex++; 
     var row = "<tr id='row_"+rowIndex+"'><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td><button onclick="removeRow('"+rowIndex+"')">X</button></td></tr>"; 
     $("#table").append(row); 
    }); 
}); 
function removeRow(index){ 
    $('#row_'+rowIndex).remove(); 
} 
</script> 

Answer 5

は、あなたが行が削除したいウィッヒ行を識別するために、同じIDで作成されているXボタンにイベントのクリックを追加する必要があります。

何か等：

$(function() { 
$("#AddLine").click(function() { 
    var row = "<tr id="row_33"><td><input type=text /></td><td><input type=text /></td><td><input type=text /></td><td><button id="button_33">X</button></td></tr>"; 

    $("#table").append(row); 

    $("#button_33").click(function() { 
      $("#row_33").remove(); 
    }); 
}); 

}）。

このIDを割り当てるプロセスも追加する必要があります。