CODEWITHSUNDEEP
jquery
user1942505
user1942505

Reputation: 520

jQuery onclick delete table row

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.

Onclick calling delTableRow() function and that function need to be changed to delete nested del link row.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function addTableRow(jQtable){
    jQtable.each(function(){
        var tds = '<tr>';
        jQuery.each($('tr:last td', this), function() {tds += '<td>'+$(this).html()+'</td>';});
        tds += '</tr>';
        if($('tbody', this).length > 0){$('tbody', this).append(tds);
        }else {$(this).append(tds);}
    });
}
function delTableRow(jQtable){
    jQtable.each(function(){
        $('tr:last', this).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 onclick="delTableRow($('#mans'));" href="#">del</a></td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
  </tr>
  <tr>
    <td>31</td>
    <td>32</td>
    <td>33</td>
    <td><a onclick="delTableRow($('#mans'));" href="#">del</a></td>
  </tr>
</table>

Upvotes: 1

Views: 28552

Answers (6)

NcXNaV
NcXNaV

Reputation: 1761

As @Ian Wood mentioned, we can use .closest() which will return the first ancestor, or the closest to our delete button, and .remove() to remove the element.

This is how we can implement it using jQuery click event instead of using JavaScript onclick.

$(document).ready(function(){
     $("#myTable").on('click','.btnDelete',function(){
         $(this).closest('tr').remove();
      });
  });
table{
  width: 100%;
  border-collapse: collapse;
}

table td{
  border: 1px solid black;
}
button:hover{
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable">
<tr>
  <th>ID</th>
  <th >Name</th>
  <th>Age</th>
  <th width="1%"></th>
</tr>

<tr>
  <td >SSS-001</td>
  <td >Ben</td>
  <td >25</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-002</td>
  <td >Anderson</td>
  <td >47</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-003</td>
  <td >Rocky</td>
  <td >32</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

<tr>
  <td >SSS-004</td>
  <td >Lee</td>
  <td >15</td>
  <td><button type='button' class='btnDelete'>x</button></td>
</tr>

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27382

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

Upvotes: 2

bipen
bipen

Reputation: 36551

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

Upvotes: 3

Ian Wood
Ian Wood

Reputation: 6573

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();
});

Upvotes: 10

mavili
mavili

Reputation: 3424

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.

Upvotes: 0

K D
K D

Reputation: 5989

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

Upvotes: 0

Related Questions