Datatables row is not deleted inside $.post method

Question

I have this block of code that works properly to delete a row from the table when I click the selected <td>

var table = $('#students-table').DataTable();
$('#students-table tbody').on('click', 'i.icon-delete', function () {
    table.row($(this).parents('tr')).remove().draw();
});

but when I embed this line into $.post.done it doesn't work at all:

var table = $('#students-table').DataTable();
$('#students-table tbody').on('click', 'i.icon-delete', function () {
    var student_id = $(this).attr('student_id');
    $.post("backend.php", {"action": "deleteStudent", "student_id": student_id}).done(function (response) {
        response = JSON.parse(response);
        if (response.deleted == "1") {
            console.log("A");
            table.row($(this).parents('tr')).remove().draw();
            console.log("B");
        }
    }); // post
});

however the condition response.deleted == "1" evaluates to True and console.log("A"); and console.log("B"); also works properly.
So why the row deletion line doesn't work when it's inside the done() function of the $.post
Please note that the question is not about the deletion process.

@esqew No there are no errors and the table also is constructed properly — Emad Saeed, May 10 '19 at 19:08
Possible duplicate of [how can I delete the row from datatable in UI,though i could successfully delete from server using Ajax call](https://stackoverflow.com/questions/56015901/how-can-i-delete-the-row-from-datatable-in-ui-though-i-could-successfully-delete) — Yevhen Horbunkov, May 10 '19 at 20:41
@U25lYWt5IEJhc3RhcmQg No, not a duplicate. My question is all about `$(this)` not about the deletion process itself — Emad Saeed, May 10 '19 at 20:57
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — Heretic Monkey, May 10 '19 at 22:37
@EmadSaeed : you're both doing the **same** job (deleting the rows from both front end and back end); you're both having the **same** root cause of the issue (missinterpeting `this` inside AJAX success callback) and the **same** solution will work for both of you equally - assign what's referring the table rows with `this` to the variable outside the scope of AJAX-call and use it within success callback. So, yes, it **IS** a duplicate. — Yevhen Horbunkov, May 11 '19 at 06:33

score 1 · Accepted Answer · answered May 10 '19 at 19:30

1

Inside the callback this refers to the jqXHR object of the ajax call and not the element the event handler is bound to. So the table.row($(this).parents('tr')).remove().draw(); doesn't work. More info here

answered May 10 '19 at 19:30

user11399887

26
1

That's correct. Could you post a solution to complete your answer? – azeós May 10 '19 at 19:36

score 0 · Answer 2 · answered May 10 '19 at 20:03

As per the previews answer: this inside '.done()' refers to jqXHR not the selected element of the selector i.icon-delete.
The solution is to assign the selected element i.icon-delete that was select by $(this) to a variable outside the $.post then use it inside $.post again. This way using $(this) would refer to i.icon-delete not to jqXHR

$('#students-table tbody').on('click', 'i.icon-delete', function () {
    var rowToRemove = $(this).parents('tr');
    var student_id = $(this).attr('student_id');
    $.post("backend.php", {"action": "deleteStudent", "student_id": student_id}).done(function (response) {
        response = JSON.parse(response);
        if (response.deleted == "1") {
            table.row(rowToRemove).remove().draw();
        }
    }); // post
});

Datatables row is not deleted inside $.post method

2 Answers2