DataTables remove row button

Question

I am trying to have my script delete the row completely once the "locatebutton" has been pressed. I have the following code however I cannot seem to get it working right. Yes, the table name within DataTables is named "dataTables-example".

Button:

<td><button type="button" name="locateButton1" class="btn btn-info" onClick="UpdateLocate(<?php echo $orow['wo']; ?>);"/>Locates</button></a></td>

Script:

<script>
function UpdateLocate(wo)
    {
            jQuery.ajax({
            type: "POST",
            url: "functions/markLocates.php",
            data: 'wo='+wo,
            cache: false,
            success: function(response)
        {
                //alert("Record successfully updated");

                    $('#dataTables-example').on( 'click', 'a.editor_remove', function (e) {
    e.preventDefault();

    editor
        .title( 'Edit record' )
        .message( "Are you sure you wish to delete this row?" )
        .buttons( { "button": "locateButton1", "fn": function () { editor.submit() } } )
        .remove( $(this).closest('tr') );
} );
        }
                    });
    }

score 6 · Answer 1 · answered Oct 29 '15 at 21:51

6

I was able to accomplish this with the following

$("#dataTables-example").on('click', '.btn-info', function () {
        $(this).parent().parent().remove();
    });

answered Oct 29 '15 at 21:51

Taylor Reed

335
2
6
18

score 5 · Answer 2 · answered Nov 09 '17 at 06:37

Try this one. this is working example

   <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td><button>Delete</button></td>
                    </tr>
                </tbody>
            </table>

    <script>
      $(document).ready(function () {
         var table = $('#example').DataTable({
            "columns": [
              null, 
              null,
              null,
              {
                "sortable": false
              }
            ]
          });          
      });
      $('#example').on("click", "button", function(){
            console.log($(this).parent());
            table.row($(this).parents('tr')).remove().draw(false);
      });
    </script>

tgrandje · Answer 3 · 2020-11-25T12:40:47.817

I know this is an old post, but for further references, the proposed answers won't work for responsive tables which rows have been splitted. In that case, we will need something like :

$('#example').on("click", "button", function(){
  var td = $(this).closest("tr"); 
  if (td.hasClass("child")) {td.prev('.parent').remove();}
  td.remove();
});

Edit

Better yet (I think) :

$('#example').on("click", "button", function(){
  var table = $(button).closest("table").DataTable();
  table.cell( {focused:true} ).row().remove();
  table.draw();

DataTables remove row button

3 Answers3

Linked