I am trying to delete with jQuery a row selecting id="data(Number)" from a datatable how this. That's possible, or id would be better on <tr> tag, instead of <td> tag?

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Check</th>
            <th>Field_1</th>
            <th>Field_2</th>
            <th>Field_3</th>
        </tr>
    </thead>
    <tbody id="dataTable">
        <tr>
            <td><input type='checkbox' id='data1'><br></td>
            <td>Field_1_Input1</td>
            <td>Field_2_Input1</td>
            <td>Field_3_Input1</td>
        </tr>
        <tr>
            <td><input type='checkbox' id='data2'><br></td>
            <td>Field_1_Input2</td>
            <td>Field_2_Input2</td>
            <td>Field_3_Input2</td>
        </tr>
    </tbody>
</table>

I am trying to delete with jQuery a row selecting id="data(Number)" from a datatable how this. That's possible, or id would be better on <tr> tag, instead of <td> tag?

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Check</th>
            <th>Field_1</th>
            <th>Field_2</th>
            <th>Field_3</th>
        </tr>
    </thead>
    <tbody id="dataTable">
        <tr>
            <td><input type='checkbox' id='data1'><br></td>
            <td>Field_1_Input1</td>
            <td>Field_2_Input1</td>
            <td>Field_3_Input1</td>
        </tr>
        <tr>
            <td><input type='checkbox' id='data2'><br></td>
            <td>Field_1_Input2</td>
            <td>Field_2_Input2</td>
            <td>Field_3_Input2</td>
        </tr>
    </tbody>
</table>

• javascript
• jquery
• html

6 Answers 6

Try:

 function removerow(number){
    $('#data'+number).closest('tr').remove();
}

and then you can call for example removerow(2) to delete row that has the input element with id=data2

DEMO

UPDATE (from ments)

To get also the td elements text within the row with $("#data"+i) try:

$('#data' + number).parent().siblings().each(function () {
        console.log($(this).text());
});

DEMO2

try the following -

1. First get the dataTable instance

var oTable = $('#table_id').dataTable();

2. call below function to delete the row corresponding to selected

oTable.fnDeleteRow(oTable.fnGetPosition(selected_tr)); // JQuery dataTable function to delete the row from the table

Yes you can use this seletor :eq(n)

function deleteRow(number)
{
     $("tbody tr:eq(" + number")").remove();
}

this will remove row which number is selected, starting by 0.

This is an example :-

 var table = $('#example').DataTable();

  $('#example tbody').on( 'click', 'img.icon-delete', function () {
    table
        .row( $(this).parents('tr') )
        .remove()
        .draw();
} );

using datatable API is easy to use and can help if you are using paging etc. which will update the page count on the document once row is removed.

// datatable intitalization.

$('#userInfo').DataTable({
        'paging': true,
        'lengthChange': true,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        'searching': true,
        'info': true,
        'autoWidth': true,
        'stateSave': true,
        'ordering': true,
        'deferRender': true,
        columnDefs: [
            { targets: [4], orderable: false }
        ]
    });

    // function to remove datatable row.
    function RemoveDatatableRow(rowId){
       var row = $("#" + rowId);
       $("#userInfo").dataTable().fnDeleteRow(row);        
    }

tableID = $('#dataTableInfoUser');
    var table = tableID.DataTable().rows().nodes();
    var rowCount = table.length;

    for (var i = 0; i < rowCount; i++) {
        var row = tableID.DataTable().row(i).node();
        var chkbox = row.cells[0].childNodes[0];
        if (null != chkbox && true == chkbox.checked) {
            tableID.dataTable().fnDeleteRow(i); 
            rowCount--;
        }
    }