Delete a target or skip the main swap

Sometimes the server succeeds and the right UI change is to remove something from the page. HTMX has a swap mode for that: delete. It drops the target element after a successful response. The response body does not matter.

Use it when deleting a task row:

<button
  hx-delete="/tasks/42"
  hx-target="closest li"
  hx-swap="delete">
  Delete
</button>

After a 2xx response, HTMX removes the <li> whether the server returns an empty body or a short confirmation. The server must delete the task in storage first. If deletion fails, return an error status and keep the row. Removing DOM nodes on the client does not authorize or persist anything.

A common mistake is deleting the row before the server confirms. Do not do that. Wait for success, then let HTMX remove the target.

The opposite case is none. The request should run, but the normal target should not receive response HTML:

<button hx-post="/analytics/dismiss" hx-swap="none">
  Dismiss tip
</button>

With none, HTMX skips the main swap. Response headers, custom events, and out-of-band fragments still run. That makes none useful when the visible update lives somewhere else: a count badge, a toast, a sidebar.

Do not use none to hide failure. If someone needs to know whether an operation worked, return a confirmation they can read, or trigger one with HX-Trigger. When in doubt, show state.

Test both modes in DevTools. For delete, force a 500 and confirm the row stays. For none, watch the Network panel and verify headers or OOB fragments update the right region while the button’s target stays untouched.