删除项目 <tr> bootbox

Question

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

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

您将无法在 ajax 成功后使用 $(this)..

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

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

Return 来自控制器的 id，您可以使用它来删除所需的

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

希望对您有所帮助:)

Answer 2

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

如果你想获得点击的元素，你需要将 this 传递给你的 js 方法调用并将其存储在一个变量中（在你的其他回调之前）并在稍后根据需要在你的 $.ajax 方法的 success/done 回调。

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

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

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

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 class，它可以用作 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 class 在标签上连接点击事件。使用点击标签的 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();
        });

    });

});

删除项目 <tr> bootbox

remove item <tr> bootbox

javascript

asp.net-mvc

bootbox