.node() always return null

HugoL

Hello,

I'm evaluating the Datatables on a small project and I'm stuck on trying to remove a row from a table.
When creating a table I'm adding a column with 2 buttons (Edit and Remove) and then I'm trying to remove the row using the DataTable API.

I'm creating my table like this:

<table id="organizationsTable" class="table table-striped table-bordered table-advance table-hover display responsive no-wrap">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>@L("Organization")</th>
                        <th>@L("CompanyNo")</th>
                        <th>@L("RegisteredOffice") </th>
                        <th>@L("VatNumber") </th>
                        <th>@L("EmailAddress") </th>
                        <th>@L("GridActions") </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var organization in Model.Items)
                    {
                        <tr>
                            <td> @organization.Id</td>
                            <td> @organization.Name </td>
                            <td> @organization.CompanyNo </td>
                            <td> @organization.RegisteredOffice </td>
                            <td> @organization.VatNumber </td>
                            <td> @organization.EmailAddress </td>
                            <td></td> @*Actions column - Generated by JS*@
                        </tr>
                    }
                </tbody>
            </table>

Then on the JS I have:

$(document).ready(function () {
            var organizationsTable = $('#organizationsTable').DataTable({
                responsive: true,
                columnDefs: [ { targets: 0,visible: false, },
                    { targets: 6, data: null,
                      defaultContent: '<a href="javascript:;" class="btn btn-icon-only default tooltips btn-edit" data-container="body" data-              placement="bottom" data-original-title="Edit">'
                                    + '<i class="fa fa-edit"></i>'
                                    + '</a>'
                                    + '<a href="javascript:;" class="btn btn-icon-only default tooltips btn-delete" data-container="body" data-placement="bottom" data-original-title="Delete">'
                                    + ' <i class="fa fa-trash-o"></i> ' 
                                    + '</a>'
                }]
            });


            $('#organizationsTable tbody').on('click', '.btn-edit', function (e) {
                debugger;
                var data = organizationsTable.row($(this).parents('tr')).data();
                alert('Edit button | Id: ' + data[0]);
                
            });

            $('#organizationsTable tbody').on('click', '.btn-delete', function (e) {
                e.preventDefault();
                var data = organizationsTable.row($(this).parents('tr')).data();
                var organizationId = data[0];
                alert('Delete button | Id: ' + data[0]);  

                abp.message.confirm(
                    app.localize('AreYouSure'),
                    function (isConfirmed) {
                        if (isConfirmed) {
                            _organizationService.deleteOrganization({
                                id: organizationId
                            }).done(function () {
                                abp.notify.info(app.localize('SuccessfullyDeleted'));
                                debugger;
                                // location.reload(); // This works but it fetches the data again. I would like to remove the row.

                              // Try 1 - Doesn't work
                                organizationsTable
                                       .row($(this).parents('tr'))
                                       .remove()
                                       .draw();

                                // Try 2 - Doesn't work 
                                var row = organizationsTable.row($(this).parents('tr'));
                                var rowNode = row.node(); //rowNode is null
                                row.remove();
                                organizationsTable.draw();
                            });
                        }
                    }
                );
            });
        });

Everything works as planned, row is deleted on the database but I can't remove it from the Grid.

Any suggestion?