Question

I have a table of tr elements in which i click on an delete for each row, it deletes itself from the table. my html is as below

<tr class="tr_body">
    <td>
    <input type="text" class="fabric_input createWOBlockBG small ui-autocomplete-input" name="basefabrics[]" onfocus ="loadUniqueAjax(' . "'fabric_input'" . ')" autocomplete="off">
    </td>
    <td>
    <input type="text" class="fac_input createWOBlockBG small ui-autocomplete-input" name="facSnapshots[]" id="facSnapshot" autocomplete="off">
    </td>
    <td>
    <a class ="deleteRow">delete</a>
    </td>
</tr>

and my jquery is as below

$('.deleteRow').click(function(){

    var elementDelete = $(this).parent().parent();
    $('#tablelist').remove(elementDelete);

});

however it returns a Uncaught TypeError: Object [object Object] has no method ‘replace’ when i click on the deleteRow anchor tag. Thanks in advance for the help.

Answer 1

Working example on JS Bin.

$('.deleteRow').click(function() {
  $(this).closest("tr")
         .remove();
});