Can I delete an element in one place, and create an element elsewhere in one go?

I have 2 parent elements, let's call them div_parent_1 and div_parent_2. Both of these parent elements have a number of child elements.

I want to use htmx to move a child element from div_parent_1 to div_parent_2 without reloading all the contents of either div.

I am struggling to explain what I need in a generic way. My actual use case is: I'm building a Kanban board and I would like to move a card from one column to another without needing to re-render the whole board.

Note: I am not asking about dragging and dropping. I want the user to click a button. Then one element should get deleted and a new element (with different html) should appear somewhere else.

Solution

I'm not sure if this is the most graceful way to do things, but it works.

My HTML looks like this:

(I'm using Django templating if you aren't familiar with it, then you just need to know that the stuff in the curly braces gets replaced with real values)

<div id="card_{{ card.id }}" 
    
    ... important stuff the user wants so see

    <button
        hx-post="{{start_card_url}}"
        hx-target="#card_{{ card.id }}"
        hx-swap="outerHTML"
        >Start
    </button>
</div>

So I do a Post to the start card endpoint and then replace the card div with whatever comes back.

The response from the "start_card" endpoint is something like this:

<div id="card_{{ card.id }}" 
    ... basically the same as before, some updated values, different buttons
</div>

<script>
    moveCardToCorrectColumn("{{card.id}}","{{card.status}}")
</script>

So it's the whole card, and a function call to immediately move the card to where it should be based on its status.