.

cards/templates/cards/_backgrounds_list.html

@@ -1,7 +1,7 @@
 <div id="backgrounds-list">
   <div class="columns is-multiline">
     {% for bg in backgrounds %}
-      <div class="column is-3-desktop is-4-tablet is-6-mobile">
+      <div class="column is-3-desktop is-4-tablet is-6-mobile" id="background-{{ bg.pk }}">
         <article class="box">
           <div style="height:140px; background-image:url('{{ bg.image.url }}'); background-size:cover; background-position:center; border-radius:4px;"></div>
           <div style="margin-top:0.5rem">
@@ -13,7 +13,7 @@
               {% else %}
                 <span class="tag is-success">Active</span>
               {% endif %}
-              <button class="button is-small is-danger" hx-post="{% url 'cards:background_delete' bg.pk %}" hx-confirm="Delete this background?" hx-swap="none">Delete</button>
+              <button class="button is-small is-danger" hx-post="{% url 'cards:background_delete' bg.pk %}" hx-confirm="Delete this background?" hx-target="#background-{{ bg.pk }}" hx-swap="outerHTML">Delete</button>
             </div>
           </div>
         </article>

cards/templates/cards/_card_item.html

@@ -52,7 +52,7 @@
       <div class="buttons" style="margin-top:0.6rem">
         <button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
         <button class="button is-small is-primary" hx-get="{% url 'cards:preview' card.pk %}" hx-target="#modal-root" hx-swap="innerHTML">Preview</button>
-        <button class="button is-small is-danger" hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-swap="none">Delete</button>
+        <button class="button is-small is-danger" hx-post="{% url 'cards:delete' card.pk %}" hx-confirm="Delete this card?" hx-target="#card-{{ card.pk }}" hx-swap="outerHTML">Delete</button>
       </div>
     </div>
   </div>

cards/views.py

@@ -140,7 +140,10 @@ def card_delete(request, pk):
     if request.method == 'POST':
         card.delete()
         if is_htmx(request):
-            return HttpResponse(status=204)
+            # Return an empty 200 response so HTMX can replace the
+            # targeted element (e.g. via `hx-swap="outerHTML"`) and
+            # remove it from the DOM immediately.
+            return HttpResponse('')
         return redirect('cards:list')
     return HttpResponseBadRequest('Only POST allowed')
 
@@ -197,7 +200,9 @@ def background_delete(request, pk):
     bg = get_object_or_404(BackgroundImage, pk=pk)
     bg.delete()
     if is_htmx(request):
-        return HttpResponse(status=204)
+        # See comment in `card_delete`: return empty body so HTMX can
+        # remove the corresponding element via `hx-swap="outerHTML"`.
+        return HttpResponse('')
     return redirect('cards:backgrounds')