Swap hx-swap-oob not working

[helixaros]

I have in my main.html the below button.

<button
        id="addItemBtnId"
        hx-get="URL"
        hx-target="#serviceLineItemId-1"
        hx-swap="afterend"
        class="btn btn-outline-primary m-2" type="button"
    > + Add an item</button>

When the button is clicked, the request loads another html file that contains the below two items

<div id="serviceLineItemId-1" class="">
....content....
</div>


<button
    id="addItemBtnId"
    hx-get="#"
    hx-target="#serviceLineItemId-1"
    hx-swap-oob="true"
    hx-swap="afterend"
    class="btn btn-outline-primary m-2" type="button"
> + Add an item</button>

The Html file shows both buttons (instead of replacing it). Why is this happening?

[aral]

You’re asking htmx to add the loaded content "after[the]end[of]" the current content.

If you remove the hx-swap attribute in the first snippet, the default hx-swap value (outerHTML) should do what you’re looking for.

(I realise this is a late reply, but in case it helps anyone else.)