選擇具有特定類的父元素並將其刪除

Question

我有一個嵌套在多個div中的錨元素。當我點擊它時，使用AJAX將特定的鳴叫從數據庫中刪除，我想用jquery直觀地刪除它，但我無法使它工作。

HTML：

<div class="tweet-wrapper w-clearfix" > 
    <div class="tweet-left-side-wrapper"><a href="{{route('show.profile',$tweet->user->profile->url_handle)}}"><img class="tweet-avatar" height="48" src="/images/profiles/{{$tweet->user->profile->image->file}}" width="48"></a> 
    </div> 
    <div class="tweet-right-side-wrapper w-clearfix"> 
     <a class="tweet-username" href="{{route('show.profile',$user->profile->url_handle)}}">{{$tweet->user->profile->display_name}}</a> 
     <a class="tweet-handle" href="{{route('show.profile',$user->profile->url_handle)}}">{{$tweet->user->profile->handle}}</a><span> · </span> 
     <a class="tweet-date" href="#">{{$tweet->created_at->diffForHumans()}}</a> 

     @if($tweet->user->profile->url_handle == $user->profile->url_handle) 

      <div class="tweet-dropdown w-dropdown" data-delay="0"> 
       <div class="tweet-dropdown-toggle w-dropdown-toggle"> 
        <div class="w-icon-dropdown-toggle"></div> 
       </div> 
       <nav class="tweet-dropdown-list w-dropdown-list"> 
        <div class="nav-dropdown-link-group"> 
         <a class="nav-dropdown-link w-dropdown-link" href="#">Share via Direct Message</a> 
         <a class="nav-dropdown-link w-dropdown-link" href="#">Copy link to Tweet</a> 
         <a class="nav-dropdown-link w-dropdown-link" href="#">Embed Tweet</a> 
         <a class="nav-dropdown-link w-dropdown-link" href="#">Pin to your profile page</a> 
         <a class="nav-dropdown-link w-dropdown-link profile-tweet-delete-button" data-tweet-id="{{$tweet->id}}" href="#">Delete tweet</a> 
        </div> 
        <div class="nav-dropdown-link-group"><a class="nav-dropdown-link w-dropdown-link" href="#">Add to new Moment</a> 
        </div> 
       </nav> 
      </div> 

AJAX：

$('.profile-tweet-delete-button').each(function(){ 
    $(this).on('click',function(){ 



     $.ajax({ 
      type:'post', 
      url:'{{URL::route('delete-tweet')}}', 
      headers: { 
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
      }, 
      data:{ 
       tweetID : $(this).data('tweet-id') 
      } 
      , 
      success:function(){ 
       successAlert("Tweet deleted!"); 
       $(this).parents('div[class^="tweet-wrapper"]').remove(); 


      }, 
      error: function(){ 
       errorAlert("Failed to delete tweet!"); 
      } 
     }); 

    }); 
}); 

Answer 1

你必須存儲this的success回調，像這樣外..

$('.profile-tweet-delete-button').each(function(){ 
    $(this).on('click',function(){ 
     var thisRef = this;    // store a ref here 
     $.ajax({ 
      type:'post', 
      url:'{{URL::route('delete-tweet')}}', 
      headers: { 
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
      }, 
      data:{ 
       tweetID : $(this).data('tweet-id') 
      } 
      , 
      success:function(){ 
       successAlert("Tweet deleted!"); 
       $(thisRef).parents('div[class^="tweet-wrapper"]').remove(); 
      }, 
      error: function(){ 
       errorAlert("Failed to delete tweet!"); 
      } 
     }); 
    }); 
});