隐藏在ajax成功后点击的html元素

Question

我是 Web 开发新手，正在制作一个模拟 twitter 应用程序。我希望在单击删除按钮后删除推文框（仅当它在后端实际删除时）

我正在使用 django 模板循环遍历每条推文：

{% for tweet in data%}

<div class="container border border-primary rounded">
    <p> tweet: {{tweet.content}}</p>
    <div class="row">
        {{tweet.id}}
        <p class = "likes" style="margin: 0px 10px;"> likes: {{tweet.likes}} </p>
        <button class="btn btn-dark like" style="margin: 0px 10px;">like</button>
        <p class = "retweets" style="margin: 0px 10px;" > retweets: {{tweet.retweets}}</p>
        <button class = "btn btn-dark retweet" style="margin: 0px 10px;">retweet</button>
        <button class="btn btn-dark float-right delete_tweet" onclick="delete_tweet('{{tweet.id}}')">delete</button>
    </div>
     
</div>
 
{% endfor %}

这是delete_tweet 函数：

function delete_tweet(id){
    
    $(document).ready(function(){
        $.ajax({
            url: "{% url 'deleteTweet'%}",
            data: {'id':id},
            dataType: 'json',
            success: function(data){
                console.log(data);
                $(this).parent().parent().remove();
            }
        });
    });
}

这可以删除后端中的推文，但remove 方法不起作用 - 我很确定我 this 指的不是正确的范围，我应该怎么做？

Answer 1

使用.closest(".your-element-name").remove();

你的按钮

function delete_tweet(id, that){

$(document).ready(function(){
    $.ajax({
        url: "{% url 'deleteTweet'%}",
        data: {'id':id},
        dataType: 'json',
        success: function(data){
            console.log(data);
            $(that).closest(".rounded").remove();
        }
    });
});

}