Deleting one table row should feel immediate and polished, even in older business systems. Most CRUD scaffolding deletes a row by navigating to a URL and reloading the whole page — which resets your scroll position, filters, and pagination, and makes even a solid backend feel outdated.
So I built SmoothDelete: a small, reusable pattern for deleting a record asynchronously and animating the row out of the interface, with no page reload.
How it works
- A dedicated AJAX endpoint handles the delete and returns JSON (
{"success": true}or{"success": false, "message": "..."}) - On success, the row gets a CSS transition, then — in the next animation frame — fades and scales down slightly (the one-frame delay matters: set both the start and end state in the same tick and the browser won't animate anything)
- After the fade, the row's height collapses (padding +
scaleY(0)) so it doesn't leave a blank gap - The DOM node is removed, and if the table's now empty, an empty-state message shows
It's framework-free at its core (assets/smooth-delete.js + .css), with a legacy jQuery version for older codebases, and a full working PHP + PDO/SQLite reference backend.
Safe mode vs. optimistic mode
One thing I wanted to get right: two documented deletion modes.
- Safe mode (default): the row disappears only after the server confirms the delete succeeded. On failure, the button re-enables and shows an error. UI and database never disagree.
- Optimistic mode: the row disappears the instant the request settles — even on failure — for cases where instant feedback matters more, with a visible warning if the delete wasn't actually confirmed.
Hiding a row client-side is never proof the database row is gone — every backend example validates, authorizes, and checks CSRF before deleting anything.
Try it
bash
cd examples/plain-php
php -S localhost:8000