How to remove elements using temporary assigns and phx-update?

Hello, Elixir Forum

I’ve recently started playing around with Phoenix Live View and read about the use of temporary assigns in sockets to allow us to reduce the amount of memory used by the server. I’m trying to build a todo list and am using the list of tasks as a temporary assign. For my list of tasks component I’m using phx-update=“prepend”. In this scenario, adding and updating tasks work perfectly. However, I got stuck in the delete feature. If the option phx-update=“prepend” only adds and updates elements, how can I remove them from the list? If it can’t be done with the prepend option, how can I have the benefits of temporary assigns and be able to perform deletions at the same time?

Thanks in advanced :wink:

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.

1 Like

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 %>"

1 Like