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!");
            }
        });
    });
});

选择具有特定类的元素父级并将其删除

1 个答案: