Question

I have a table using the datatable plugin. I am trying to remove a row from it dynamically using this:

$(document).ready(function() {

    var oTable = $("table#demo-dtable-02").dataTable({"aaSorting": []});

    $(".icon-remove").on('click',function(){
        var anSelected = fnGetSelected( oTable );
        deleted=oTable.fnDeleteRow(anSelected[0] );
      });

              });

I get the following error ReferenceError: fnGetSelected is not defined
I tried using (from here: jQuery Data Tables plugin not removing table row)

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

This would of course remove the row but will not reset the text in the footer like
Showing 1 to 10 of 17 entries.
Removing this way is not the best solution to this.

My DOM Code looks like:

<?PHP
                                            $count=1;
foreach($ledgers as $row) {?>
    <tr >
    <td><a onClick="viewDetails(<?PHP echo $row['id'];?>)" style="cursor:pointer"><?PHP echo $row['name'];?></a></td>

     <td><?PHP echo $row['email'];?></td>
     <td><?PHP echo $row['contact_number'];?></td>

     <td>
     <i class="icon-remove" rowcount=<?PHP echo $count;?> style="cursor:pointer; margin-right:5px" title="Remove Ledger" id="removeLedgerNow"></i>

    <i class="icon-edit" style="cursor:pointer" title="Edit Ledger" onclick="viewDetails(<?PHP echo $row['id'];?>)"></i>

   </td>
  </tr>
   <?PHP $count++; } ?>

Comment.

Answer 1

Updated:

Try this code:

 $('.icon-remove').on('click', function () {
   // Get the position of the current data from the node
   var aPos = oTable.fnGetPosition( $(this).closest('tr').get(0) );
   // Delete the row
   oTable.fnDeleteRow(aPos);
 } );

Notes:

1. There is no fnGetSelected in the API. It could be a custom function the OP has, but is not produced in the question.
2. fnGetPosition is accepts td, th, or tr element
3. .get(0) is to break the element out of the jQuery object