Troubleshooting AJAX Cart Item Deletion in Django: Items Not Removing from Cart

I am getting problem during deleting product from cart In my cart.html:

<button class="btn btn-sm btn-remove delete-item" data-item="{{product_id}}"><i class="fas fa-trash-alt" ></i></button>

This is the delete button I created. Now also I created js for this button so in my cart.js:

console.log("Hi");

$(document).on("click", '.delete-item' ,function(){
    let this_val=$(this)
    var _pID=$(this).attr('data-item');
    console.log(_pID);

    $.ajax({
        url: '/delete-from-cart',
        data: {
            'id': _pID,
        },
        dataType: 'json',
        beforeSend: function(){
            this_val.hide()
        },
        success: function(response){
            this_val.show()
            $(".cart-items-count").text(response.totalcartitems)
            $("#cart-list").html(response.data)
        }
    })
})

for the js file when i am clicking on the delete button I am getting product ids as output I also created a views for it. So, In my views.py:

def delete_item_from_cart(request):
    product_id=str(request.GET['id'])
    if 'cart_data_obj' in request.session:
        if product_id in request.session['cart_data_obj']:
            cart_data=request.session['cart_data_obj']
            del request.session['cart_data_obj'][product_id]
            request.session['cart_data_obj'] = cart_data

    cart_total_ammount=0
    if 'cart_data_obj' in request.session:
        for p_id, item in request.session['cart_data_obj'].items():
             cart_total_ammount += int(item['qty']) * float(item['price'])

    context= render_to_string("core/async/cart_list.html", {"products":products}, {"data":request.session['cart_data_obj'],'totalcartitems': request.session['total_cart_items'] ,'cart_total_ammount':cart_total_ammount})
    return JsonResponse({"data": context, 'totalcartitems': request.session['total_cart_items'] ,'cart_total_ammount':cart_total_ammount})

and then In urls.py:

path("delete-from-cart/", delete_item_from_cart,name="delete-from-cart"),

this is my url

Note: At last I would say that I made a cart page where all the products are displaying which are sellected. and I connected cart-lsit.html with cart.html by main tag with id

you can see this in the below code in cart.html:

{% extends 'partials/base.html'%}


{%load static%}

{% block content %}
    <main class="main" id="cart-list">
        <div class="container1">
            <center><h2 style="font-size: 28px; color: #FFC0CB; font-weight: bold;">Your Shopping Cart</h2></center>
            <div class="row">
                {% for product_id, item in data.items %}
                <div class="col-md-8">
                    <div class="cart-item">
                        <div class="row">
                            <div class="col-md-2">
                                <a href="{%  url 'core:product_detail' item.pid  %}">
                                    <img src="{{item.image}}" alt="Product Image" class="product-image">
                                </a>
                            </div>
                            <div class="col-md-6 product-details">
                                <a href="{%  url 'core:product_detail' item.pid  %}">
                                    <h4>{{item.title}}</h4>
                                </a>
                                <p>Product description lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                <div class="quantity-control">
                                    <button class="btn btn-sm btn-update"><i class="fas fa-sync-alt"></i></button>
                                    <input type="number" class="form-control quantity-input" value="{{item.qty}}">
                                    <button class="btn btn-sm btn-remove delete-item" data-item="{{product_id}}"><i class="fas fa-trash-alt" ></i></button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h4>{{item.price}}/Quantity</h4>
                            </div>
                        </div>
                    </div>
                    <!-- More cart items can be added dynamically here -->
                </div>
                {%  endfor  %}
                <div class="col-md-4">
                    <div class="cart-item total-section">
                        <h3>Total: <span class="total">{{cart_total_ammount}}</span></h3>
                        <button class="btn btn-checkout">Proceed to Checkout</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="{% static 'assets/js/cart.js' %}"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </main>
    </body>
{%  endblock content  %}

The same main id of the above code i am using for cart-list.html:

<body>
    <main class="main" id="cart-list">
        <div class="container1">
            <center><h2 style="font-size: 28px; color: #FFC0CB; font-weight: bold;">Your Shopping Cart</h2></center>
            <div class="row">
                {% for product_id, item in data.items %}
                <div class="col-md-8">
                    <div class="cart-item">
                        <div class="row">
                            <div class="col-md-2">
                                <a href="{%  url 'core:product_detail' item.pid  %}">
                                    <img src="{{item.image}}" alt="Product Image" class="product-image">
                                </a>
                            </div>
                            <div class="col-md-6 product-details">
                                <a href="{%  url 'core:product_detail' item.pid  %}">
                                    <h4>{{item.title}}</h4>
                                </a>
                                <p>Product description lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                                <div class="quantity-control">
                                    <button class="btn btn-sm btn-update"><i class="fas fa-sync-alt"></i></button>
                                    <input type="number" class="form-control quantity-input" value="{{item.qty}}">
                                    <button class="btn btn-sm btn-remove delete-item" data-item="{{product_id}}"><i class="fas fa-trash-alt" ></i></button>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <h4>{{item.price}}/Quantity</h4>
                            </div>
                        </div>
                    </div>
                    <!-- More cart items can be added dynamically here -->
                </div>
                {%  endfor  %}
                <div class="col-md-4">
                    <div class="cart-item total-section">
                        <h3>Total: <span class="total">{{cart_total_ammount}}</span></h3>
                        <button class="btn btn-checkout">Proceed to Checkout</button>
                    </div>
                </div>
            </div>
        </div>
        <script src="{% static 'assets/js/cart.js' %}"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </main>
    </body>

this hole code is not deleting products from cart page.