Django中Ajax删除图片按钮异常问题求助

你遇到的两个问题根源在于重复ID和URL获取逻辑错误，还有一处JS语法问题，具体修复如下：

1. 核心问题拆解 #

• 循环渲染卡片时给每个卡片都加了id="my-url-div"，但ID在页面中必须唯一。jQuery的$("#my-url-div")只会匹配第一个元素，导致所有删除请求都发向第一张图片的接口，这就是为什么删的总是第一个。
• document.getElementsByClassName返回的是HTMLCollection对象，不是数组，直接用forEach会导致部分浏览器不兼容，这可能是第一个按钮无法触发的原因。

2. 分步修复 #

第一步：修正HTML的重复ID #

把卡片里的id="my-url-div"改成class，class允许重复使用：

<div class="form-group mt-2">
    <div class="row">
    {% if question.picture_set.all %}
        {% for pic in question.picture_set.all %}
            <div class="col-lg-4 col-md-6" id="card_div{{pic.id}}">
            <form action="" method="post" class="delete_form" data-pk="{{pic.id}}">
                <!-- 将id改为class -->
                <div class="card picture_card my-url-div" data-url="{% url 'main:delete_uploaded_picture' pk=pic.id %}">
                    <img class="card-img-top img-fluid" src="{{ pic.picture.url }}" alt="">
                    <div class="card-body">
                        <button type="button" class="btn btn-danger btn-sm waves-effect waves-light delete_picture" id="clicked_btn{{pic.id}}">Elimina</button>
                    </div>
                </div>
            </form>
            </div>
        {% endfor %}
    {% endif %}
    </div>
</div>

第二步：修正JS的事件绑定与URL获取 #

先把HTMLCollection转成数组再遍历，同时从当前点击的表单内获取对应图片的删除URL：

// 转成数组解决forEach兼容问题
const deleteForms = Array.from(document.getElementsByClassName('delete_form'));
deleteForms.forEach(deleteForm => {
    deleteForm.addEventListener('click', (e)=>{
        e.preventDefault();
        let pk = deleteForm.getAttribute('data-pk');
        // 从当前表单内获取专属的删除URL
        const url = deleteForm.querySelector('.my-url-div').dataset.url;
        
        $.ajax({
            type: 'POST', 
            url: url,
            data: {
                'csrfmiddlewaretoken': csrftoken,
                'pk': pk,
            }, 
            success: function(response){
                // 直接移除DOM元素比隐藏更干净
                $('#card_div'+pk).remove();
                handleAlerts('success', 'Immagine Rimossa');
            }, 
            error: function(error){
                handleAlerts('danger', 'Ops qualcosa è andato storto!');
            }
        });
    });
});

第三步：完善后端视图（可选但推荐） #

当前视图未校验请求方法，也没处理图片不存在的情况，容易引发报错，建议补充：

from django.http import JsonResponse, Http404
from django.views.decorators.http import require_POST

# 仅允许POST请求
@require_POST
def delete_uploaded_picture(request, pk):
    try:
        picture = Picture.objects.get(id=pk)
    except Picture.DoesNotExist:
        raise Http404("图片不存在")
    
    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
        picture.delete()
        return JsonResponse({'status': 'success'})
    return JsonResponse({'status': 'error'}, status=400)

内容的提问来源于stack exchange，提问作者Giorgio Scarso