I have a button in each row of a table: How can the OnClick handler tell which row it was called from?

Question

The goal: ,,

So I've got a Table (Which is initialized as a JQuery DataTable). Each row contains a 'remove me' button, and when that button is pressed, I want to delete the row from the current table.

What I've tried:

tr = $(this).closest('tr');
$('.my-table-class').dataTable().fnDeleteRow(tr);

What happens

No matter what row I click on, the last row is deleted from the table is deleted, except if there's only one row in the table, in this situation a javascript error: "TypeError: j is undefined" is thrown from Jquery.dataTable.min.js. Both baffle me.

I can get the attributes of the right row - for example, If do something like: alert($(this).attr("data-name")); I click on John Smith's row, I'll see 'John Smith' in an alert box... so $(this) is the a tag, so why doesn't the .closest() method grab the right tr tag?

My Questions:

• How do I get 'this' row (the one which contained the button which was pressed) in order to delete it?

• Any idea what's causing the 'TypeError: j is undefined" error when there's only one row in the table?

Details:

Here's the rendered (from .jsp) HTML table:

<table class="table my-table-class">
<thead><tr><th>Name</th><th> </th></tr></thead> 
<tbody>
        <tr>
            <td>John Smith</td>
            <td><a href="javascript://" class="my-button-class" data-name="John Smith"><i class="icon-plus"></i></a></td>
        </tr>

        <tr>
            <td>Robert Paulson</td>
            <td><a href="javascript://" class="my-button-class" data-name="Robert Paulson"><i class="icon-plus"></i></a></td>
        </tr>

        <tr>
            <td>Juan Sanchez</td>
            <td><a href="javascript://" class="my-button-class" data-name="Juan Sanchez"><i class="icon-plus"></i></a></td>
        </tr>
</tbody>

Here's how I initialize the tables as a Jquery DataTable:

$('.st-my-table-class').dataTable( {
            "bInfo": true, 
            "aaSorting": [[ 0, "desc" ]], // sort 1st column 
            "bFilter": true, // allow search bar
            "bPaginate": false,  // no pagination 
            "sDom": '<"top"f>rt<"bottom"lp><"clear">' // (f)ilter bar on top, page (i)nfo omitted
        } );

And here's the whole event handler:

$('.my-button-class').on("click", function(){ 
tr = $(this).closest('tr'); 
$('.my-table-class').dataTable().fnDeleteRow(tr);
});

Answer 1

I think This JSFIDDLE is much closer to what you wanted. Here is the basic code

$(function() {
      var dataTable = $('.my-table-class').dataTable();
      $( ".test" ).click(function() {
           var row = $(this).closest('tr'); 
           var nRow = row[0];
           dataTable.dataTable().fnDeleteRow(nRow);
      });     
});

which I pulled from this resource here that explains in full detail on how it works. In short you need to select the node itself not the jQuery object. You can also use .first like so.

$( ".test" ).click(function() {
     var row = $(this).closest('tr').first(); 
     dataTable.dataTable().fnDeleteRow(row);

Note: I added the "This" text as I don't have the button style/icon.

Answer 2

As @Dawn suggested, you're passing a jQuery element to fnDeleteRow , which is expecting a HTML node.

Simply try:

$('.my-button-class').on("click", function () {
    tr = $(this).closest('tr').get(0); // gets the HTML node
    $('.my-table-class').dataTable().fnDeleteRow(tr);
});

Working JSFiddle: http://jsfiddle.net/so4s67b0/

Answer 3

First of all in the function it is need to declare a variable and assign our data table to it. Then take the selected row's index into another variable. After that remove the selected row from the data table. .draw(false) will be manage the pagination and no of rows properties in jquery DataTable.

    $('.my-button-class').click(function () {

        var tbl = $('.my-table-class').DataTable(); 
        var index = tbl.row(this).index();
        var row = $(this).closest("tr").get(index);
        tbl.row(index).remove().draw(false);

    });