SmoothDelete: Animated AJAX Row Deletion for Modern and Legacy Web Apps

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

1. A dedicated AJAX endpoint handles the delete and returns JSON ({"success": true} or {"success": false, "message": "..."})
2. 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)
3. After the fade, the row's height collapses (padding + scaleY(0)) so it doesn't leave a blank gap
4. 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