删除成功时从表中删除行？答案

【问题标题】：Remove row from table on delete success?删除成功时从表中删除行？
【发布时间】：2019-02-18 22:55:32
【问题描述】：

我想从表中删除已删除的行，但它不适用于我。我尝试了以下代码：

场景：当用户单击删除链接/按钮时，它会发送删除请求并从数据库中删除数据，因此它应该更新表前端视图并在成功时删除单击的删除行。

// 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');
            }
        });
    });

我尝试$(this).parent().closest('tr').remove(); 也成功但没有工作。

HTML 标记：

<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>

谢谢

【问题讨论】：

标签： javascript jquery ajax knockout.js

【解决方案1】：

因为$(this) 内部的ajax 函数与外部不同，所以你应该这样做

$("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');
        }
    });
});

【讨论】：

它现在工作了。实际上我的目标是错误的视图/表格！
@Imaduddin 祝你好运；）

【解决方案2】：

试试这个

// 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');
            }
        });
    });

【讨论】：