Atirag February 2016

Delete row by clicking button on cell using jquery

I have this table structure that I use to construct a table dynamically using jQuery.

<table class="table table-hover" id="paper-table"><thead><tr><td><b>Pubmed ID</b></td><td><b>Title</b></td><td><b>Year</b></td><td><b>Journal</b></td><td></td></tr></thead>
<tbody>
    <tr>
    <td> id </td>
    <td> title </td>
    <td> year </td>
    <td> journal </td>
    <td><a href="#" class="delete-row"><span class="glyphicon glyphicon-trash"></span></a></td>
    </tr>
</tbody>
<tfoot><tr><span id="table-title">Paper</span></tr></tfoot></table>

The last column of each row is a trashcan icon that I want to make clickable to delete the row where the user clicks. The table gets constructed correctly but I need a jQuery function that will allow me to delete the row. Also it should check if the table has no more rows after deleting one and delete the table if there are no more rows. Looking at some other posts I found that I could delete the table by doing something like this

$('#paper-table').on('click', 'a', function(){
    $(this).closest('tr').remove();
});

But it doesn't work when I click the trashcan icon. Am I missing something?

Answers


majita February 2016

The code you link does delete the row in which the anchor tag is but it wont delete the table. If your question is how to delete the table then you will have to check if there are no more rows and then delete the table e.g. -

$('#paper-table').on('click', 'a', function() {
  $(this).closest('tr').remove();

  //check if no more rows and remove the table
  if ($('#paper-table tbody tr').length == 0) {
    $('#paper-table').remove();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-hover" id="paper-table">
  <thead>
    <tr>
      <td><b>Pubmed ID</b>
      </td>
      <td><b>Title</b>
      </td>
      <td><b>Year</b>
      </td>
      <td><b>Journal</b>
      </td>
      <td></td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><span id="table-title">Footer</span>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>id</td>
      <td>title</td>
      <td>year</td>
      <td>journal</td>
      <td><a href="#" class="delete-row">del</a>
      </td>
    </tr>
    <tr>
      <td>id</td>
      <td>title</td>
      <td>year</td>
      <td>journal</td>
      <td><a href="#" class="delete-row">del</a>
      </td>
    </tr>
  </tbody>
</table>


Shashank February 2016

Please refer jsfiddle for the working demo. Here is the code: (extra rows has been added for testing)

HTML

<table class="table table-hover" id="paper-table">
 <thead>
  <tr>
   <th>Pubmed ID</th>
    <th>Title</th>
   <th>Year</th>
  <th>Journal</th>
 </tr>
 </thead>
<tbody>
<tr>
<td> id 1 </td>
<td> title 1</td>
<td> year 1</td>
<td> journal 1</td>
<td><a href="#" class="delete-row" onclick="deleteThis(this)"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td> id 2</td>
<td> title2 </td>
<td> year 2</td>
<td> journal 2</td>
<td><a href="#" class="delete-row"  onclick="deleteThis(this)"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td> id 3</td>
<td> title 3 </td>
<td> year 3</td>
<td> journal 3</td>
<td><a href="#" class="delete-row"  onclick="deleteThis(this)"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
<tfoot><tr><span id="table-title">Paper</span></tr></tfoot></table>

JS

function deleteThis(obj){
    $(obj).closest('tr').remove();
}

Post Status

Asked in February 2016
Viewed 2,440 times
Voted 9
Answered 2 times

Search




Leave an answer