Django, htmx delete record and update

Question

So I have a list in a partial Django template.

<div class="col">
    <div class="row pb-2" id="rowcolor">
        <div class="col border-bottom">
            pk:{{ color.pk }} / name:{{ color.description|title }}
        </div>
        <div class="col-auto">
            <button hx-delete="{% url 'delete-color' pk=color.pk %}" hx-target="#rowcolor" hx-swap="outerHTML"
                class="btn btn-outline-secondary btn-sm float-end" type="button">Delete</button>
        </div>
    </div>
</div>

When deleting the pk149/name3: the pk147 / name1 disappears.

When refreshing it is correct. pk:149 is gone.

The view looks like this:

@require_http_methods(["DELETE"])
def delete_color(request, pk):
    if request.htmx:
        Color.objects.get(pk=pk).delete()

        return HttpResponse("")

I have been trying to read the htmx documentation. But I do not understand. Can anyone please point me in the right direction here?

Answer 1

Don't give the same id to multiple elements: make the items unique, for example by adding the primary key to it:

<div class="col">
    <div class="row pb-2" id="rowcolor{{ color.pk }}">
        <div class="col border-bottom">
            pk:{{ color.pk }} / name:{{ color.description|title }}
        </div>
        <div class="col-auto">
            <button hx-delete="{% url 'delete-color' pk=color.pk %}" hx-target="#rowcolor{{ color.pk }}" hx-swap="outerHTML"
                class="btn btn-outline-secondary btn-sm float-end" type="button">Delete</button>
        </div>
    </div>
</div>

You can probably slightly boost efficiency of the view by using:

@require_http_methods(['DELETE'])
def delete_color(request, pk):
    if request.htmx:
        Color.objects.filter(pk=pk).delete()
        return HttpResponse('')