Skip to main content

Click to Delete

This example would teach you how to build a button and click to delete the li element in the list or row in table

How it Works

Turbo Streams deliver page changes as fragments of HTML wrapped in self-executing turbo-stream elements. Each stream element specifies an action together with a target ID to declare what should happen to the HTML inside it

<!--Removes the element designated by the target dom id.-->
<turbo-stream action="remove" target="dom_id">

If we plan to make some DOM elements to be deleted, we can assign unique ID and then use Turbo Stream which has action="remove"


Try to delete item in the list and see how it works