删除项目 <tr> 引导箱答案

【问题标题】：remove item <tr> bootbox删除项目 <tr> 引导箱
【发布时间】：2017-11-26 18:56:01
【问题描述】：

我正在向我的服务器发出 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();

【问题讨论】：

标签： javascript asp.net-mvc bootbox

【解决方案1】：

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

如果您想获取点击的元素，您需要将this 传递给您的js 方法调用并将其存储在一个变量中（在您的其他回调之前），并在您的$.ajax 方法成功后根据需要使用它/完成回调。

所以在 ui 中你将传递 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。在这种方法中，您可以在锚标记中设置删除操作的 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();
        });

    });

});

【讨论】：

【解决方案2】：

你将无法在 ajax 成功中使用 $(this)..

在循环时，将标识符（id 或类）添加到您的

 <a class="btn btn-danger btn-excluir" id="item_{@item.id}" role="button" onclick="Delete(@item.Data)" ><i class="glyphicon glyphicon-trash"></i> Excluir</a>

从控制器返回id，你可以用它来删除需要的

 $('#item_' + result.id).remove();

希望对你有帮助:)

【讨论】：