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

Question

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.

Answer 1

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.