The latest articles on DEV Community by smithveg (@smithvegstack). https://dev.to/smithvegstack https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4112307%2F2388c0ca-2c9e-4924-ad46-67ae98e8bd39.png https://dev.to/smithvegstack en smithveg Sun, 06 Sep 2026 12:48:47 +0000 https://dev.to/smithvegstack/smoothdelete-animated-ajax-row-deletion-for-modern-and-legacy-web-apps-3mbl https://dev.to/smithvegstack/smoothdelete-animated-ajax-row-deletion-for-modern-and-legacy-web-apps-3mbl <p>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.</p> <p>So I built <strong>SmoothDelete</strong>: a small, reusable pattern for deleting a record asynchronously and animating the row out of the interface, with no page reload.</p> <h2> How it works </h2> <ol> <li>A dedicated AJAX endpoint handles the delete and returns JSON (<code>{"success": true}</code> or <code>{"success": false, "message": "..."}</code>)</li> <li>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)</li> <li>After the fade, the row's height collapses (padding + <code>scaleY(0)</code>) so it doesn't leave a blank gap</li> <li>The DOM node is removed, and if the table's now empty, an empty-state message shows</li> </ol> <p>It's framework-free at its core (<code>assets/smooth-delete.js</code> + <code>.css</code>), with a legacy jQuery version for older codebases, and a full working PHP + PDO/SQLite reference backend.</p> <h2> Safe mode vs. optimistic mode </h2> <p>One thing I wanted to get right: two documented deletion modes.</p> <ul> <li> <strong>Safe mode (default):</strong> 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.</li> <li> <strong>Optimistic mode:</strong> 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.</li> </ul> <p>Hiding a row client-side is never proof the database row is gone — every backend example validates, authorizes, and checks CSRF before deleting anything.</p> <h2> Try it </h2> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> bash cd examples/plain-php php -S localhost:8000 </code></pre> </div> javascript php webdev opensource