Django+HTMX删除按钮无法定位指定<tr>元素问题

问题根源 #

当前删除按钮的配置存在两个核心问题：

• 你使用了hx-swap-oob="#emp_hx_row_{{ row.record.pk }}"，但OOB（Out of Band）交换要求响应内容中必须包含匹配该ID的元素，而你的视图返回空响应，htmx找不到可替换的内容，自然无法删除行。
• 默认情况下，htmx会用响应内容替换触发请求的元素（即删除按钮），所以按钮会消失，但父级<tr>元素不受影响。

解决方案 #

1. 调整删除按钮的HTMX属性 #

直接指定目标为当前行，并使用hx-swap="delete"让htmx在请求成功后直接删除目标元素，无需OOB交换：

<!-- 修改后的删除按钮代码 -->
<div class="gls-width-auto gls-margin-small-left">
    <button class="gls-flex gls-flex-center gls-flex-middle" 
            gls-tooltip="title: Delete" 
            hx-delete="{% url 'employment_history_delete' row.record.pk %}" 
            hx-confirm="Are you sure you wish to delete?"
            hx-target="#emp_hx_row_{{ row.record.pk }}"
            hx-swap="delete">
        <div class="fa fa-trash fa-xs" style="color:#000000"></div>
    </button>
</div>

• hx-target：明确指定要操作的目标为当前行（利用你已设置的唯一ID）。
• hx-swap="delete"：告知htmx，请求成功完成后直接删除目标元素。

2. 调整视图返回值 #

保留原有删除逻辑，将返回值改为204 No Content状态码（这是HTMX处理删除操作的标准响应），替代空的HttpResponse：

# views.py 中删除视图的修改
from django.http import HttpResponseNoContent

def employment_history_delete(request, pk):
    # 你的删除逻辑：获取记录并执行删除
    # ...
    return HttpResponseNoContent()

HTMX会识别204状态码，并自动执行hx-swap="delete"的操作，直接移除目标行。

为什么之前的尝试失败？ #

• 用<div>包裹<tr>：HTML规范中<tbody>的直接子元素只能是<tr>，这种嵌套会导致DOM结构不合法，HTMX无法正确定位和交换元素。
• 错误使用hx-swap-oob：OOB交换依赖响应内容中包含带对应ID的元素，空响应无法满足该条件，因此不生效。

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