How can I remove table row with jQuery

Question

I created a table with two buttons one has the function to add new rows to the table and another remove them.

I tested this way and can only add new lines, when I try to remove an error happens.

var table = $( '#table-data' )[0];

$( table ).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$( table ).undelegate( '.tr_clone_del', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().delete( thisRow ).find( 'input:text' ).val( '' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>

Answer 1

To remove the line just you can use the .remove() that will remove the element that is passed as a parameter of DOM.

$(table).delegate( '.tr_clone_del', 'click', function () {
    var thisRow = $(this).closest("tr")[0];
    thisRow.remove();
});

Obs.:

Here we are using the version 2.1.1 of Jquery but it is worth remembering that from the version 3.0 the methods .delegate() and .undelegate() are obsolete and should be replaced by .on() and .off() respectively.

Following example below, using delegate().

var table = $( '#table-data' )[0];

$(table).delegate( '.tr_clone_add', 'click', function () {
    var thisRow = $( this ).closest( 'tr' )[0];
    $( thisRow ).clone().insertAfter( thisRow ).find( 'input:text' ).val( '' );
});

$(table).delegate( '.tr_clone_del', 'click', function () {
    var thisRow = $(this).closest("tr")[0];
    thisRow.remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="who"></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"></td>
        <td><input type="button" name="del" value="del" class="tr_clone_del"></td>
    </tr>
</table>