アイテムを削除する<tr> bootbox

Question

アイテムを削除するためにサーバーにajaxリクエストを行っていますが、ブートボックス経由でフロントエンドで削除する必要がありますが、私の応答はOKですが、フロントエンドでは削除されません。

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

私はこの問題はここにあると思う： $（この）.closest（ "TR"）を削除（）;。ループしながら、コントローラおよびあなたからあなたの

<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に識別子（IDまたはクラス）を追加

Answer 1

必要

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

を削除するには、同じを使用することができますコールバック内の$(this)という意味は異なります。コードサンプルでは、​​$.ajax呼び出しのオブジェクトはxhrです。

$.ajaxメソッドのsuccess/doneコールバックで、クリックされた要素を取得する場合は、thisをjsメソッド呼び出しに渡し、変数に格納して（必要に応じて）必要に応じて使用する必要があります。

だから、UIで、あなたのDelete方法

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

の2番目のパラメータとして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コードでハードコーディングする代わりにそのアクションを使用することができます。また、jQueryセレクタとして使用してclickイベントを呼び出すことができるタグにcssクラスを与えます。

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

    }); 

}); 

Answer 2

あなたは文句を言わないAJAX成功に$（this）を使用することができます。..希望は、これはあなたを助けます:)