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

Description and use

SmoothDelete enables asynchronous row deletion with smooth animation, avoiding page reloads and preserving UI state in both legacy and modern web apps.

Problem

Deleting a table row in CRUD apps often requires a full page reload, disrupting user context and UX.

Outcome

Users experience immediate, polished row removal without page reload, maintaining scroll position, filters, and pagination, improving UX in both legacy and modern apps.

Workflow

• 1. User clicks delete button on a table row.
• 2. JavaScript sends AJAX request to a dedicated endpoint.
• 3. Server processes delete, returns JSON success or error.
• 4. On success, JavaScript applies CSS transition to fade and scale the row.
• 5. After transition, row height collapses and DOM node is removed.
• 6. If table becomes empty, an empty-state message is displayed.

Evidence

Deleting one table row should feel immediate and polished, even in older business systems.

Source

Safe mode (default): the row disappears only after the server confirms the delete succeeded.

Source

Optimistic mode: the row disappears the instant the request settles — even on failure.

Source