Remove table row from a button inside the same row (when collapsed)

meldro

Hello everybody,
i've got a responsive datatable with a "remove row" button inside the last column of each row.

I'm using this code to do that:

$('#example').on('click', '.remove', function () {
        var table = $('#example').DataTable();
        table
            .row($(this).parents('tr'))
            .remove()
         .draw();
        });

This the example (and the problem) : http://jsfiddle.net/hg5m209e/19/

The remove button works until the last column is collapsed in a new row... in this case my code fails.

The last column goes to a child row and brokes the code.

How can i fix that?

Thanks a lot!

colin

Hi @meldro ,

This here should do the trick. Your problem is that the child details are a row themselves, so you need to parse past that to get to the original row,

Cheers,

Colin

meldro

Hi @colin ,
thanks for reply but your link shows my same code...

Do i miss something?

colin

That's odd - it's still on my screen with the modified code. Try this one, but pasting code in case that also doesn't work.

$(document).ready(function() {
  $('#example').DataTable({
    responsive: true
  });

  $('#example').on('click', '.remove', function() {
    var table = $('#example').DataTable();
    var row = $(this).parents('tr');

    if ($(row).hasClass('child')) {
      table.row($(row).prev('tr')).remove().draw();
    } else {
      table
        .row($(this).parents('tr'))
        .remove()
        .draw();
    }

  });
});

meldro

@colin ... thanks a lot!