Я использую Django в качестве бэкенда, PostgresSQL в качестве БД и HTML, CSS и Javascript в качестве интерфейса

Я вызываю API Django с помощью Javascript, чтобы показать товар корзины аутентифицированному user

serializer.py

 from .models import *
from rest_framework import serializers

class productserializers(serializers.ModelSerializer):
    class Meta:
        model = Cart
        fields = '__all__'
        depth = 1
 

views.py

 @api_view(['GET'])
def showproduct(request):
    if request.method == 'GET':
        result = Cart.objects.filter(user = request.user)
        serialize = productserializers(result, many = True)
        return Response(serialize.data)
 

main.js

 $(document).ready(function() {
    $.ajax({
      url: 'http://127.0.0.1:8000/showdata',
      dataType: 'JSON',
      success: function(data){
        for (var i = 0; i < data.length; i  )
        {
          var row = 
          $('<tr><td style="font-style:bold">'
           data[i].product.name '</td><td style="font-style:bold">'
           data[i].product.price '</td><td><a href='
           data[i].product.link_href '><button type="button" class="btn btn-outline-success">Buy</button></a></td><td><a href='#'><button type="button" class="btn btn-outline-danger">DELETE</button></a></td></tr>');
          $("#tableProduct").append(row);
        }
      }
    });
});
 

Ну, а сверху код на main.js

 ...
<td><a href='#'><button type="button" class="btn btn-outline-danger">DELETE</button></a></td>
...
 

В этой строке я хочу реализовать функцию удаления. Где пользователь может удалить выбранный товар из корзины. Итак, как реализовать функцию удаления, которая может удалить товар из корзины и показать ответ в шаблоне.

Вот как я добавляю элемент корзины в АДМИНИСТРИРОВАНИЕ DJANGO.

view.py

 def addProduct(request):
    user = request.user
    product_id = request.GET.get('product_id')
    product_cart = Product.objects.get(id=product_id)
    Cart(user=user, product=product_cart).save()
    return render(request, 'cart/addtocart.html')
 

ПРАВКА 1

 <script>
  $(document).ready(function() {
    $.ajax({
      url: 'http://127.0.0.1:8000/showdata ',
      dataType: 'JSON',
      success: function(data){
        for (var i = 0; i < data.length; i  )
        {
          var row = 
          $('<tr><td style="font-style:bold">'
           data[i].product.name '</td><td style="font-style:bold">'
           data[i].product.price '</td><td><a href='
           data[i].product.link_href '><button type="button" class="btn btn-outline-success">Buy</button></a></td><td><button onclick="destoryCart(' data[i].product.id ')" type="button" class="btn btn-outline-danger">DELETE</button></td></tr>');
          $("#tablebuild").append(row);
        }
     
      }
    });
});

const destoryCart = (id) => {
  let url = `{% url 'main:cart_destroy' ${id} %}`
  $.ajax({
      beforeSend: function(xhr){xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');},
      url: url,
      type: 'DELETE',
      success: (data) => {
          console.log("deleted!")
      },
      error: (err) => {
          console.log(err);
      }
  });
} 
</script>  
 

urls.py

 path('cart_destroy/', views.CartDestroyAPIView.as_view(), name ='cart_destroy'),
 

views.py

 class CartDestroyAPIView(DestroyAPIView): # DeleteView
    permission_classes = [IsAuthenticated] # Or anything else you want
    authentication_classes = [SessionAuthentication]  # Or anything else you want
    serializer_class = productserializers
    queryset = Cart.objects.all() 
 

Вот как вы можете удалить свои карты:

 class CartDestroyAPIView(DestroyAPIView): # DeleteView
"""
Cart Destroy API View
"""
permission_classes = [IsAuthenticated] # Or anything else you want
authentication_classes = [SessionAuthentication]  # Or anything else you want
serializer_class = productserializers
queryset = Cart.objects.all()   
 

А для части JS вы можете создать функцию, которая получает идентификатор и отправляет запрос на удаление в вашу CartDestroyAPIView конечную точку:

 const destoryCart = (id) => {

    let url = `your end point/${id}`; 


    $.ajax({
        beforeSend: function(xhr){xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');},
        url: url,
        type: 'DELETE',
        success: (data) => {
            console.log("deleted!")
        },
        error: (err) => {
            console.log(err);
        }
    });

}  
 

Теперь, когда вы создаете списки своих корзин success во время вызова ajax, вы можете сделать это с помощью кнопки удалить:

 `<td>
     <button onclick="destoryCart(${cart.id})" type="button" class="btn btn-outline-danger">
        DELETE
     </button>
 </td>`   
 

в вашем случае будет так:

 $(document).ready(function() {
$.ajax({
  url: 'http://127.0.0.1:8000/showdata',
  dataType: 'JSON',
  success: function(data){
    for (var i = 0; i < data.length; i  )
    {
      var row = 
      $('<tr><td style="font-style:bold">'
       data[i].product.name '</td><td style="font-style:bold">'
       data[i].product.price '</td><td><a href='
       data[i].product.link_href '><button type="button" class="btn btn-outline-success">Buy</button></a></td><td><button onclick="destoryCart(' data[i].product.id ')" type="button" class="btn btn-outline-danger">DELETE</button></td></tr>');
      $("#tableProduct").append(row);
    }
  }
});
 

});

если вы пишете свой js внутри файла .js, вы не можете получить csrf_token это, вместо этого вы можете сделать это.
Совет:
вы отступаете (`), когда хотите использовать свою переменную внутри строки в js

 let name = "John";
console.log(`My name is ${name}`);
 

 def delete_cart_item(request):
    cart_item_id = request.GET.get('cart_item_id')
    CartItem.objects.filter(cart__user=rquest.user.id,id=cart_item_id)
    return render(request, your template)