remove item <tr> bootbox

Question

I'm doing a ajax request to my server to remove a item and I have to remove on Front-End via bootbox, my response is ok, but I dont got remove on front-end.

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

I think that the problem is here: $(this).closest("tr").remove();

Answer 1

The meaning of $(this) inside a callback will be different. In your code sample, it is the xhr object for the $.ajax call.

If you want to get the clicked element, you need to pass this to your js method call and store that in a variable (before your other callbacks) and use that as needed later in your $.ajax method's success/done callback.

So in the ui you will pass this as the second parameter of your Delete method

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

And inside the Delete method, you can store it to a local variable and you can use that later to get the closest table row.

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

Another option is to use unobtrusive javascript. In this approach, you can set the url for the delete action in the anchor tag and use that instead of hard coding it in the javascript code. Also , give a css class to the a tag which can be used as the jQuery selector to wire up the click event.

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

Now, wire up the click event on a tag with our css class. use the url attribute of the clicked a tag and use that for your ajax call. For example,

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

    });

});