Скрытие html-элемента, нажатого после успеха ajax

Я новичок в веб-разработке и делаю имитацию приложения twitter. Я хочу, чтобы поле твита удалялось после нажатия на кнопку удаления (только если оно действительно удалено в бэкенде)

Я использую django templating для циклического просмотра каждого твита:

{% 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 не ссылается на правильную область видимости, что я должен делать вместо этого?

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