使用hx-swap-oob导致DOM元素重复？原因及解决方法

我的业务流程如下：

1. 向数据库插入新记录；
2. 通过HTMX将插入的行显示在表格中（整个表格重新渲染）；
3. 与上一步同时，将某个数值显示在段落元素中（段落重新渲染）。

我尝试在段落元素上使用hx-swap-oob="true"参数来实现，但出现了DOM元素（段落）重复的问题。请问这是什么原因，该如何解决？

以下是相关代码：

Template.html #

<table class="ui celled table">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody hx-post="{% url 'books' book.id %}" hx-trigger="addBook from:body" hx-vals='{"action": "show_editions"}' id="book_list">
        {% include "selling-books.html" %}
    </tbody>
</table>
...
... # some other DOM elements
...
<p id="book_number">{{ book.number }}</p>

Selling-books.html #

{% for edition in editions %}
<tr>
    <td>{{ edition.in }} pieces</td>
    <td>{{ edition.out }} pieces</td>
    <td>{{ edition.price }} USD</td>
</tr>
{% endfor %}

<p hx-swap-oob="true" id="book_number">{{ book.number }}</p>

Views.py #

def book_status(request, template_name = 'book.html', id=""):
    book = Book.objects.get(id=id)
    editions = Edition.objects.filter(book_id=id)

    if request.method == "POST":
            action = request.POST.get('action')
            
            if action == 'addBook':
                addEdition_form = AddBookForm(request.POST or None)
                if addEdition_form.is_valid():
                    ... some logic ...
                    
                    return HttpResponse(status=204, headers={'HX-Trigger': 'addBook'})

            if action == 'show_editions':
                for edition in editions:
                    ... some logic ...
                return render(request, 'selling-book.html', {'editions': editions, 'book': book})
    
    else:
        return render(request, template_name, {'book':book, 'editions':editions, 'addEdition_form': addEdition_form})   

问题原因 #

核心问题是初始页面渲染时，selling-books.html被包含进Template.html，导致页面中已经存在一个id="book_number"的段落；而当HTMX触发show_editions动作后，返回的selling-books.html内容里又带有一个带hx-swap-oob="true"的同ID段落。

HTMX的OOB（Out of Band）交换逻辑是找到页面中匹配ID的元素并替换，但如果初始渲染时已经因为模板包含出现两个同ID段落，后续OOB交换会把新段落追加进去，而非替换，最终导致重复。

解决步骤 #

1. 移除初始页面中重复的book_number段落 #

在Template.html里删除独立的<p id="book_number">{{ book.number }}</p>，因为该段落已经通过{% include "selling-books.html" %}被渲染到页面中。修改后的Template.html相关部分如下：

<table class="ui celled table">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
        </tr>
    </thead>
    <tbody hx-post="{% url 'books' book.id %}" hx-trigger="addBook from:body" hx-vals='{"action": "show_editions"}' id="book_list">
        {% include "selling-books.html" %}
    </tbody>
</table>
...
... # some other DOM elements
...
<!-- 移除此处的<p id="book_number"> -->

2. 确保OOB交换的目标唯一 #

保留selling-books.html中的<p hx-swap-oob="true" id="book_number">{{ book.number }}</p>，这样当HTMX返回内容时：

• 表格tbody会被新行替换（触发请求的元素默认交换自身内容）；
• OOB段落会精准找到页面中唯一的book_number元素并替换内容，不会产生重复。

3. 验证视图逻辑 #

确保在show_editions分支中，book.number已被正确更新（比如插入新记录后，重新获取book对象避免使用缓存的旧数据）：

if action == 'show_editions':
    # 重新获取book，确保拿到最新的number值
    book = Book.objects.get(id=id)
    editions = Edition.objects.filter(book_id=id)
    for edition in editions:
        ... some logic ...
    return render(request, 'selling-book.html', {'editions': editions, 'book': book})

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