Removing a Component

Return LiveResponse::remove() from a LiveAction. LiveComponent renders once more, then removes the component root. Style [data-live-removing] to animate the exit.

ux.symfony.com

Component removed

Dismiss a component

Return LiveResponse::remove() from the action.

Browser event

dismissed { id: 42 }

Dispatch an event

Dispatch dismissed with id 42, then remove the component.

Animation complete

Animate removal

Shake, then drop the component with CSS.

Remove the component

Return LiveResponse::remove() from a LiveAction. The response contains the final render and an X-Live-Remove: 1 header. The browser applies that render, then removes the component root.

This only removes the component from the page. Persist or delete application data inside the action.

src/Twig/Components/NotificationBanner.php#L45-L49

45#[LiveAction]
46public function dismiss(): LiveResponse
47{
48    return LiveResponse::remove();
49}

Dispatch an event before removal

Call dispatchBrowserEvent() before returning LiveResponse::remove(). The final render carries dismissed with id: 42, and the browser dispatches it before removing the component.

src/Twig/Components/NotificationBanner.php#L51-L60

51#[LiveAction]
52public function dismissWithEvents(): LiveResponse
53{
54    $this->dispatchBrowserEvent(
55        'dismissed',
56        ['id' => 42],
57    );
58
59    return LiveResponse::remove();
60}

Animate removal

With a drop-out keyframe already defined, start it when LiveComponent adds [data-live-removing] to the component root. LiveComponent waits for the animation to finish before removing the element.

The media query skips the effect for people who prefer reduced motion.

templates/demos/live_component/live_remove.html.twig#L5-L10

 5        @media (prefers-reduced-motion: no-preference) {
 6            .animation-drop-out[data-live-removing] {
 7                animation: drop-out 1100ms linear forwards;
 8                will-change: scale, rotate, translate, opacity;
 9            }
10        }

Author smnandre

Published 2026-08-26