Ich kann die Zeile nicht mit jQuery entfernen

Question

Wenn ich auf 'neue Zeile hinzufügen' zu meiner Rechnungstabelle klicke, wird die Zeile dynamisch hinzugefügt.

Wenn ich jedoch die Zeile dynamisch mit der Schaltfläche "Zeile entfernen" löschen muss, wird sie nicht gelöscht.

Irgendwelche Ideen, wie dies behoben werden kann?

Unten ist mein Code:

<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(); 
}); 

Danke.

Answer 1

Wenn Ihre neue Zeile an das Ende der Tabelle hinzugefügt wird tun die folgende

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

Wenn Sie die erste Zeile der Tabelle entfernen möchten, müssen Sie das folgende

tun

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

Answer 2

Diese Auswahl:

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

zielt dieses Element:

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

Das ist wahrscheinlich nicht das, was Sie entfernen wollen, vor allem, da sie die Knöpfe angeklickt hält.

Hast du so etwas wie dies bedeuten

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

?:

---

Denken Sie daran, dass Sie auch immer Entfernen der letzten sind (oder zuerst, wenn Sie, dass man möchte) Zeile aus der Tabelle . Wenn Sie eine spezifische Zeile aus der Tabelle entfernen möchten, können Sie die Schaltfläche auf die Zeile selbst setzen. Etwas wie folgt aus:

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

Und Ereignis Delegation nutzen das Click-Ereignis für alle Zeilen dynamisch in der Tabelle hinzugefügt zu handhaben:

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

Answer 3

$(this).parents() wählt div.col-md-6 was nicht das ist, was Sie wollen.

Wenn Sie die letzte Zeile in der Tabelle entfernen möchten, sollten Sie tun:

$('#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(); 
}); 

---

Aber wenn Sie eine bestimmte Zeile wählen Sie einen Weg machen entfernen sollten Zeilen auszuwählen und dann entfernen Sie. Persönlich würde ich sie als ausgewählt markieren und dann entfernen Sie diese wie folgt:

$('tbody.body').on('click', 'tr', function(){ // Notice ON instead of CLICK, it is to select row that will be added later on 
    var row = $(this); // select the row that has been clicked 
    row.toggleClass('selected-row'); // mark the row as selected 
}); 

$('#remove-row').click(function(){ 
    var table = $('tbody.body'); // Select the table 
    var rows = table.find('tr.selected-row'); // Select all the row that are marked for deletion 
    rows.remove(); // then remove them all 
});