Delete Row

+++ title = "Delete Row" template = "demo.html" +++

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

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:

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.

<style> tr.htmx-swapping td { opacity: 0; transition: opacity 1s ease-out; } </style>

{{ demoenv() }}

<script> //========================================================================= // Fake Server Side Code //========================================================================= // data var contacts = [ { name: "Joe Smith", email: "[email protected]", status: "Active", }, { name: "Angie MacDowell", email: "[email protected]", status: "Active", }, { name: "Fuqua Tarkenton", email: "[email protected]", status: "Active", }, { name: "Kim Yee", email: "[email protected]", status: "Inactive", }, ]; // routes init("/demo", function(request, params){ return tableTemplate(contacts); }); onDelete(/\/contact\/\d+/, function(request, params){ return ""; }); // templates function rowTemplate(contact, i) { return `<tr> <td>${contact["name"]}</td> <td>${contact["email"]}</td> <td>${contact["status"]}</td> <td> <button class="btn danger" hx-delete="/contact/${i}"> Delete </button> </td> </tr>`; } function tableTemplate(contacts) { var rows = ""; for (var i = 0; i < contacts.length; i++) { rows += rowTemplate(contacts[i], i, ""); } return ` <table class="table delete-row-example"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Status</th> <th></th> </tr> </thead> <tbody hx-confirm="Are you sure?" hx-target="closest tr" hx-swap="outerHTML swap:1s"> ${rows} </tbody> </table>`; } </script>