In this case, where updating happens frequently and you have a large collection as opposed to a delete every once in a while on a rather small collection, I would remove the item within an updated method hook placed on the list. Something like:

updated() {
    this.el.firstElementChild.remove()
    // or
    this.el.lastElementChild.remove()
}

Since updated gets called every time you add a new item, it works beautifully as you only have to remove either the first or last depending if you either append or prepend.

To arbitrarily remove a specific item, you could add a data attribute to the hook passing in the selector of the node to delete: data-deleted="<%= @deleted %>"

You could fetch the (new) to-do list and use phx-update="replace". Then on all the other actions you would go back to phx-update="prepend".

I have been thinking about the same thing in the context of charting. Imagine a line plot of time series data that is updated every second, and I want to show the last 24 hours. For that use case I really do not want to replace all 86,400 data points every second. Temporary assigns seem like the obvious solution, except for the fact that I don’t think that I can delete the oldest data point after appending a new one. If there is a way to do that/work around it I would be really interested in that.