Delete Row

This example shows how to implement a delete button that removes a table row upon completion. First let’s look at the table body:

<table class="table delete-row-example">
  <tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s">

The table body has a hx-confirm attribute to confirm the delete action. It also set the target to be the closest tr that is, the closest table row, for all the buttons (hx-target is inherited from parents in the DOM.) The swap specification in hx-swap says to swap the entire target out and to wait 1 second after receiving a response. This last bit is so that we can use the following CSS:

tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 1s ease-out;

To fade the row out before it is swapped/removed.

Each row has a button with a hx-delete attribute containing the url on which to issue a DELETE request to delete the row from the server. This request responds with a 200 status code and empty content, indicating that the row should be replaced with nothing.

  <td>Angie MacDowell</td>
    <button class="btn btn-danger" hx-delete="/contact/1">
Server Requests ↑ Show