I cannot remove row with jQuery

Question

When I click 'add new row' to my invoice table, it dynamically adds the row.

However when I have to delete the row dynamically with the 'remove row' button it does not delete.

Any ideas how this can be fixed?

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

Thank you.

`$(this).parents().first()` ? Isn't that targeting the `div` which holds the button? How does that target a table row? — David, Aug 15 '16 at 14:15

David · Answer 1 · 2016-08-15T14:21:28.947

This selection:

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

Is targeting this element:

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

That's probably not what you want to remove, especially since it holds the buttons being clicked.

Did you mean something like this?:

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

Keep in mind that you're also always removing the last (or first, if you want that one) row from the table. If you want to remove a specific row from the table, you could put the button on the row itself. Something like this:

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

And use event delegation to handle the click event for all rows dynamically added to the table:

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

This works as expected. thanks a lot will accept the answer in 7 mins — edmond, Aug 15 '16 at 14:21

score 1 · Accepted Answer · answered Aug 15 '16 at 14:18

1

If your new row gets added to the end of your table do the following

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

If you are removing the first row of your table you will need to do the following

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

answered Aug 15 '16 at 14:18

Korush Mahdavieh

541
5
15

Chax · Answer 3 · 2016-08-16T20:24:06.230

$(this).parents() selects div.col-md-6 which is not what you want.

If you want to remove the last row in your table you should do:

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

But if you want to select a specific row to remove you should make a way to select rows and THEN remove them. Personnaly I would mark them as selected and then remove them like this:

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

for the second solution, i should add a check box with a class 'select-row' so i can select the row i want? — edmond, Aug 16 '16 at 20:10
yes you could. You wont even have to add a class to them. Just have to search the `table` like this :`$('tbody.body').find('checkbox:checked').parent('tr').remove()` and this will do the trick. It look for every checked checkbox in the table and remove their row — Chax, Aug 16 '16 at 20:17

I cannot remove row with jQuery

3 Answers3

Linked