javascript - 删除项目 <tr> 引导箱

Question

我正在向我的服务器发出一个 ajax 请求来删除一个项目，我必须通过 bootbox 在前端删除，我的响应没问题，但我没有在前端删除。

function Delete(data) {
       

    bootbox.confirm({
        message: "Deseja Excluir o item?",
        buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-danger'
            },
            cancel: {
                label: 'No',
                className: 'btn-success'
            }
        },
        callback: function (result) {
            if (result) {
                $.ajax({
                    url: "/Ponto/DeleteAjuste/" + data,
                    type: "POST",
                    contentType: "application/json;charset=UTF-8",
                    dataType: "json",
                    success: function (result) {
                      
                            $(this).closest("tr").remove();
                        
                    },
                    error: function (errormessage) {
                        alert(errormessage.responseText);
                    }
                });
            }
            console.log('This was logged in the callback: ' + result);
        }
    });

@foreach (var item in ViewBag.Ajuste)
            {
                <tr>
                    <td>@item.Data</td>
                    <td>@item.Descricao</td>
                    <td>@item.Horas</td>
                    
                    <td >
                        <a class="btn btn-danger btn-excluir" role="button" onclick="Delete(@item.Data)" ><i class="glyphicon glyphicon-trash"></i> Excluir</a>
                    </td>
                    
                    
                </tr>
            }

我认为问题出在这里: $(this).closest("tr").remove();

Answer 1

回调中$(this)的含义会有所不同。在您的代码示例中，它是用于 $.ajax 调用的 xhr 对象。

如果你想获取被点击的元素，你需要将 this 传递给你的 js 方法调用，并将其存储在一个变量中(在你的其他回调之前)，并在你的 $.ajax 方法的成功/完成回调。

因此，在用户界面中，您将传递 this 作为 Delete 方法的第二个参数

onclick="Delete(@r.Id,this)"

在Delete方法中，您可以将其存储到局部变量中，稍后可以使用它来获取最接近的表行。

function Delete(data,t)
{
    var _this = $(t);
    bootbox.confirm({
      //Your existing code goes here. Omitted to save space
    },
    callback: function(result) {
           $.ajax({
                //Your existing code goes here. Omitted to save space
                success: function(result) {
                    _this.closest("tr").remove();
           });
       }
    });
} 

另一个选择是使用不显眼的 JavaScript。在这种方法中，您可以在 anchor 标记中设置删除操作的 url 并使用它，而不是在 javascript 代码中对其进行硬编码。另外，为 a 标签提供一个 css 类，该标签可以用作 jQuery 选择器来连接 click 事件。

<a class="btn btn-danger del-btn" 
   href="@Url.Action("DeleteAjuste","Ponto",new {id=item.Data})" 
   role="button"  ><i class="glyphicon glyphicon-trash"> </i> Excluir</a>

现在，将标签上的单击事件与我们的 css 类连接起来。使用单击的标签的 url 属性并将其用于您的 ajax 调用。例如，

$(function() {

    $("a.del-btn").click(function(e) {
        e.preventDefault();

        var _this = $(this);
        var url=_this.attr("href");
        //use url for your ajax call.
        $.post(url)
         .done(function(res){
            _this.closest("tr").remove();
        });

    });

});