Hide or delete row from table when delete record

Question

I have a table that displays a client list and has a fluff on the side to exclude each customer. I want to make this deletion via ajax, how do I make the line that is the client that was deleted disappear without having to refresh the page?

Note: I am using jQuery Datatable plugin

<table id="appDatatable" class="table table-bordered table-hover">
    <tbody>
    @foreach($clientes as $cliente)
        <tr>
            <td>{{ $cliente->email }}</td>
            <td>{{ $cliente->telefone }}</td>
            <td class="text-center">
                ...
                <a class="btn btn-danger btn-sm" title="Excluir cliente"
                   onclick="conf('{{ $cliente->id }}');">
                    <span class="fa fa-close"></span>
                </a>
            </td>
        </tr>
    @endforeach
    </tbody>
</table>

Answer 1

I use it like this:

$("#tabela").on("click",".deletaBtn", function() {
    var tr = $(this).closest('tr');
    tr.css("background-color","yellow");
    tr.fadeOut(600, function(){
        tr.remove();
    });
    return false;
});

Where . detelaBtn is the class defined in the exclusion button

I don’t know if Datatable has a function for this. See if it helps.

Answer 2

jQuery Datatable has the method fnDeleteRow to delete a row from the table.

After the return of your success AJAX, you can include for example:

var tabela = $('#tabela').dataTable();
tabela.fnDeleteRow( N ); // onde N é o índice da linha a ser excluída da tabela