Delete with Confirmation

Delete items with a confirmation dialog. Uses htmx hx-confirm and HX-Trigger for toast notifications.

Projects

ID Name Status Actions
1 Project Alpha active
2 Project Beta pending
3 Project Gamma active
4 Project Delta completed
5 Project Epsilon active

How it works

  • hx-confirm shows a native browser confirmation dialog
  • hx-delete sends a DELETE request
  • Server returns HX-Trigger: showToast header
  • JavaScript listens for the event and shows a toast notification
  • hx-swap="outerHTML swap:500ms" removes the row with a delay for animation