On my HTML template, I am printing a list of my QuerySet that I passed from views.py in Django. I want users to delete an entry from the list without refreshing the page. How do I do that?

urls.py - path("del_trans/<int:trans_num>", views.delete_transaction, name="delete_transaction")

views.py

def delete_transaction(request, trans_id):
    user = User.objects.get(username=request.user)

    transaction = Transaction.objects.get(ruser=user, id=trans_id)

    transaction.delete()

    return HttpResponse(status=204)

trans.html

<tr id="trans-{{t.id}}">
    <td>{{ t.name }}</td>
        
    <td><button class="btn" onclick="delete_trans({{t.id}})"><span style="cursor:pointer;
            color:blue;
            text-decoration:underline;">Delete</span></button></td>
</tr>

index.js

function delete_trans(id) {
    fetch(`/del_trans/${id}`, {
        method: 'PUT',
        body: JSON.stringify({
            trans_id: id
        })
    });

    document.querySelector('#trans-' + id).style.display = 'none';
}