Remove row from table on delete success?

Question

I want to remove the deleted row from the table but it's not working with me. I tried the below code:

Scenario: When a user click on delete link/button, it sends a delete request and deletes data from Database so it should update the table front end view and should remove the clicked deleted row on success.

// Delete remedy which is linked with a Symptom ( Symptoms Table )
    $("a.remedy-row-delete").click(function(e) {
        e.preventDefault();

        var remedy_id = $(this).attr('data-id');
        var dataString = '&id='+remedy_id;

        $.SmartMessageBox({
            title: "Delete Remedy",
            content: "Remedy Entry will be deleted, are you sure ?",
            buttons: "[YES][NO]"
        }, function (ButtonPress) {
            if (ButtonPress === "YES"){
                $.ajax({
                    type: 'POST',
                    data: dataString,
                    url: '<?php echo $this->CxHelper->Route('eb-admin-delete-linked-remedy-from-symptom') ?>',
                    success: function(data) {
                        $("#deleteMessage").show().delay(5000).fadeOut();
                        $(this).closest('tr').remove();
                    }
                });
            }
            else {
                $("a.remedy-row-delete").removeClass('alert');
            }
        });
    });

I tried $(this).parent().closest('tr').remove(); also on success but not working.

HTML markup:

<table id="cx-records-table" class="table display table-striped table-bordered" width="100%">
            <thead>
                <tr>
                    <th>
                        Title
                    </th>
                    <th>
                        Delete
                    </th>
                </tr>
                <?php foreach($remedies as $key => $remedy){ ?>
                    <tr>
                        <td class="all"><?php echo $remedy['title']; ?><br></td>
                        <td><a class="cx-action remedy-row-delete" href="javascript:void(0)" data-id="{{remedy['id']}}"><i class="fa fa-trash-o"></i></a></td>
                    </tr>
                <?php } ?>

            </thead>
            <tbody></tbody>
        </table>

Thanks

Answer 1

try this

// Delete remedy which is linked with a Symptom ( Symptoms Table )
    $("a.remedy-row-delete").click(function(e) {
        e.preventDefault();

        var remedy_id = $(this).attr('data-id');
        var dataString = '&id='+remedy_id;
        var self = this;

        $.SmartMessageBox({
            title: "Delete Remedy",
            content: "Remedy Entry will be deleted, are you sure ?",
            buttons: "[YES][NO]"
        }, function (ButtonPress) {
            if (ButtonPress === "YES"){
                $.ajax({
                    type: 'POST',
                    data: dataString,
                    url: '<?php echo $this->CxHelper->Route('eb-admin-delete-linked-remedy-from-symptom') ?>',
                    success: function(data) {
                        $("#deleteMessage").show().delay(5000).fadeOut();
                        $(self).closest('tr').remove();
                    }
                });
            }
            else {
                $("a.remedy-row-delete").removeClass('alert');
            }
        });
    });

Answer 2

because $(this) inside of ajax function is different than from outside you should do something like this

$("a.remedy-row-delete").click(function(e) {
    e.preventDefault();

    var remedy_id = $(this).attr('data-id');
    var dataString = '&id='+remedy_id;
    var $this = $(this) // <--- 1. Add this line

    $.SmartMessageBox({
        ...
    }, function (ButtonPress) {
        if (ButtonPress === "YES"){
            $.ajax({
                ...
                success: function(data) {
                    ...
                    $this.closest('tr').remove(); // <----change this and will works well
                }
            });
        }
        else {
            $("a.remedy-row-delete").removeClass('alert');
        }
    });
});