How to delete a specific frame?

I’m using Rails 7 with turbo-rails gem and output the following HTML containing the list of messages with delete links:

<turbo-frame id="message_1">
    <h1>Title 1</h1>
    <a href="/messages/1" data-turbo-method="delete">Delete</a>
</turbo-frame>

<turbo-frame id="message_2">
    <h1>Title 2</h1>
    <a href="/messages/2" data-turbo-method="delete">Delete</a>
</turbo-frame>

When user clicks the delete button I want the corresponding message

  1. to be deleted from the database
  2. to be removed from the screen by removing its turbo frame.

without full page reload. I do delete the message from the database in the MessageController#destroy action. However, the message is not removed from the screen (until I manually refresh the page).

What should I render in the MessageController#destroy action to remove the message from the screen?

def destroy
  if @message.destroy!
    render turbo_stream: turbo_stream.remove("message_#{@message.id")
  end
end

yunggindigo Is it possible to do this without turbo streams? I’m currently not using them.

You don’t need to use web sockets to use turbo-stream.

You don’t need to use web sockets to use turbo-stream.

Oh, I did not know that, thanks! yunggindigo’s solution works perfectly without any web sockets.