jQuery onclick delete table row

Question

How to delete table row on click?

Here is a jsfiddle.

I want to delete only row on which del link is nested, not the last row how script is doing now.

<

Answer 1

remove all your inline javascript and use click event.... no need to call onclick event in the attr... and this should dot he trick.. $(this).parents('tr').remove();

try this

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">  </script>
<script type="text/javascript">
  $(function(){
      $('table').on('click','tr a',function(e){
         e.preventDefault();
        $(this).parents('tr').remove();
      });
 });

</script>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="mans">
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td><a href="#">del</a></td>
     //---^---here remove the onclick inline function for all.. 
  </tr>
 ....
</table>

working fiddle here

Answer 2

$('td a').on('click',function(){
   e.preventDefault();
   $(this).parent().parent().remove();
});

Answer 3

remove the onclick and replace with a class (ie. class="remove"). bind the event to the table - this will give you a performance gain over having lots of event handlers and make sure that new rows added will obey this behaviour too.

$('table').on('click','tr a.remove',function(e){
  e.preventDefault();
  $(this).closest('tr').remove();
});

Answer 4

$('td a').on('click',function(e){
   //delete code.
   e.preventDefault();
   $(this).parent().parent().remove(); // OR $(this).parents('tr').remove();
});

Answer 5

Use

$(this).parent().parent().remove();

on the anchor tags. So if your link is a child of a td, which is a child of tr, then tr will be removed.