How can I remove table row with jQuery

Question

How can I remove table row with jQuery

Navigation

#1 by (0 votes)

0

I created a table with two buttons one has the function to add new rows to the table and another to 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><tablewidth="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>

javascript html jquery

asked by anonymous 12.03.2018 / 15:59

1 answer

Using direction service google maps no ionic 3 CKEDITOR converting special characters

score 0 · Accepted Answer

For the removal of the line you can simply use the .remove () that will remove the element that is passed as the DOM .

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

Note:

Here we are using 2.1.1 version of Jquery but remember that from 3.0 version http://api.jquery.com/delegate/ "> .delegate () and .undelegate () are obsolete and should be replaced with .on () and . off () respectively.

Follow the 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><tablewidth="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>