Django+HTMX删除记录后页面异常：误删其他条目求助

问题描述 #

在Django局部模板中渲染颜色列表，每条记录对应一行并包含HTMX删除按钮。点击删除pk=149/name=name3的条目时，pk=147/name=name1的条目会意外消失，但刷新页面后显示正常（pk=149已被正确删除）。

模板代码 #

<div class="col">
    <div class="row pb-2" id="rowcolor">
        <div class="col border-bottom">
            pk:{{ color.pk }} / name:{{ color.description|title }}
        </div>
        <div class="col-auto">
            <button hx-delete="{% url 'delete-color' pk=color.pk %}" hx-target="#rowcolor" hx-swap="outerHTML"
                class="btn btn-outline-secondary btn-sm float-end" type="button">Delete</button>
        </div>
    </div>
</div>

视图函数 #

@require_http_methods(["DELETE"])
def delete_color(request, pk):
    if request.htmx:
        Color.objects.get(pk=pk).delete()

        return HttpResponse("")

问题原因与解决方法 #

• 核心问题：所有颜色条目的行都使用了相同的id="rowcolor"，HTMX根据ID查找目标元素时，只会匹配DOM中的第一个该ID元素，所以点击任意删除按钮都会删除页面上第一个id="rowcolor"的行（也就是pk=147的那条），而非当前点击按钮所在的行。

• 解决方案：

  1. 给每个行的ID添加唯一标识，比如使用颜色的pk值：id="rowcolor-{{ color.pk }}"
  2. 同步修改按钮的hx-target属性，指向当前行的唯一ID：hx-target="#rowcolor-{{ color.pk }}"

修改后的模板代码：

<div class="col">
    <div class="row pb-2" id="rowcolor-{{ color.pk }}">
        <div class="col border-bottom">
            pk:{{ color.pk }} / name:{{ color.description|title }}
        </div>
        <div class="col-auto">
            <button hx-delete="{% url 'delete-color' pk=color.pk %}" hx-target="#rowcolor-{{ color.pk }}" hx-swap="outerHTML"
                class="btn btn-outline-secondary btn-sm float-end" type="button">Delete</button>
        </div>
    </div>
</div>

另外，视图返回空HttpResponse是可行的，因为outerHTML交换后会用空内容替换目标行，达到删除效果，无需额外返回内容。

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