jQueryで行を削除できません

Question

請求書テーブルに「新しい行を追加」をクリックすると、その行が動的に追加されます。

しかし、行を '行削除'ボタンで動的に削除する必要がある場合、削除されません。

これはどのように修正できますか？以下は

は私のコードです：

<tbody class="body"> 
    <tr> 
     <td><input type="hidden" class="form-control" name="count[]" value="1"><span>1</span</td> 
     <td><input type="text" class="form-control" name="item[]" placeholder="item"/></td> 
     <td><input type="text" class="form-control" name="description[]" placeholder="description"/></td> 
     <td><input type="text" class="form-control quantity" name="quantity[]" placeholder="quantity"/></td> 
     <td><input type="text" class="form-control price" name="price[]" placeholder="price"/></td> 
     <td><input type="text" class="form-control item_discount" name="item_discount[]" value="0" placeholder="item discount"/></td> 
     <td><input type="text" class="form-control total" name="total[]" placeholder="total" readonly=""/></td> 
    </tr> 
</tbody> 

<div class="col-md-6"> 
    <button type="button" class="btn btn-success" id="add-row"><i class="fa fa-plus"> Add new row</i></button> 
    <button type="button" class="btn btn-danger" id="remove-row"><i class="fa fa-minus"> Remove row</i></button> 
</div> 

$('#remove-row').click(function() { 
    $(this).parents().first().remove(); 
}); 

ありがとうございました。

Answer 1

新しい行があなたのテーブルの末尾に追加されます場合はありませんあなたがテーブルの最初の行を削除する場合

$('tbody tr:last-child').remove(); 

次次

を行う必要があります3210

$('tbody tr:first-child').remove(); 

Answer 2

この選択：

$(this).parents().first() 

は、この要素を対象としている：

だ

<div class="col-md-6"> 

おそらくないあなたはそれがクリックされ、ボタンを保持している、特に以来、削除したいもの。

あなたがテーブルから行（あなたはその1をしたい場合、または最初の）あなたが最後の除去も常にしていることに注意してください。この？：

$('tbody tr').last().remove(); 

---

のようなものを意味しました。 の特定の行をテーブルから削除する場合は、行自体にボタンを置くことができます。

<tr> 
    <!-- your other table cells --> 
    <td><button type="button" class="btn btn-danger remove-row" /></td> 
</tr> 

、動的にテーブルに追加されたすべての行のクリックイベントを処理するイベントの委任を使用します：このような何か

$('tbody').on('click', '.remove-row', function() { 
    $(this).closest('tr').remove(); 
}); 

Answer 3

$(this).parents()は、あなたが望むものではないdiv.col-md-6を選択します。

あなたがテーブルの最後の行を削除したい場合は、あなたが行う必要があります。

$('#remove-row').click(function(){ 
    var table = $('tbody.body'); // This get the tbody element of your table 

    var rowToRemove = table.find('tr').last(); // Get the last row of your table 
    rowToRemove.remove(); 
}); 

---

しかし、あなたはあなたを削除するために特定の行を選択したい場合は、行を選択するための方法を作るし、その後削除してくださいそれら。 Personnaly私はそれらを選択してマークし、次のように削除します：