Ajax请求成功后移除点击元素：Django模拟推特应用this指向问题

你对this指向错误的判断是正确的，除此之外你的代码还有一处冗余逻辑也加剧了指向问题：

1. 默认jQuery Ajax的success回调内this指向Ajax请求的配置对象，不是你点击的删除按钮
2. 你把$(document).ready()写在delete_tweet函数内属于完全多余的逻辑，函数仅在用户点击按钮时触发，此时页面DOM已经加载完成，这层包裹还会把this指向进一步修改为document对象
3. 你没有把点击的按钮元素传递到处理函数中，无法直接定位到需要删除的推文容器

修正步骤 #

第一步：修改Django模板的删除按钮绑定 #

在onclick事件中把点击的按钮自身作为参数传入函数：

<button class="btn btn-dark float-right delete_tweet" onclick="delete_tweet('{{tweet.id}}', this)">delete</button>

第二步：重写delete_tweet函数 #

以下两种方案选一种即可：

方案1：提前保存元素引用（兼容性最好，不受DOM结构调整影响）

function delete_tweet(id, btn){
    // 提前拿到要删除的推文容器，不受回调作用域影响
    const $tweetContainer = $(btn).closest('.container.border-primary');
    $.ajax({
        url: "{% url 'deleteTweet'%}",
        data: {'id':id},
        dataType: 'json',
        success: function(data){
            console.log(data);
            $tweetContainer.remove();
        }
    });
}

方案2：绑定回调的this指向

function delete_tweet(id, btn){
    $.ajax({
        url: "{% url 'deleteTweet'%}",
        data: {'id':id},
        dataType: 'json',
        // 把回调内的this绑定为点击的按钮元素
        context: btn,
        success: function(data){
            console.log(data);
            $(this).parent().parent().remove();
        }
    });
}

内容的提问来源于stack exchange，提问作者Vedank Pande