How to remove current row from table in jQuery?

Question

I have a table in html as follows

<table>
<tbody>
<tr>
<td>test content</td>
<td><input type="button" onClick="remove()"></td>
</tr>
....
...

</tbody>
</table>

now if the same pattern continues, i want to remove a row if a remove button is clicked on that row. how do i achieve the same with jQuery?

Answer 1

Try this:

<input type="button" onClick="$(this).parent().parent().remove();">

Or you can make it more generic like this:

<script>
  $(document).ready(function()
  {
    $(".btn").click(function(){
      $(this).parent().parent().remove();
    });
  });
</script>

<tr>
  <td><input type="button" class="btn"></td>
</tr>

Answer 2

Nicer:

$(this).closest('tr').remove();

More on closest()

<input type="button" onClick="$(this).closest('tr').remove();">

This has the benefit of working no matter what your HTML looks like in the cell.