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

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.

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

I’m trying something similar with rendering a list of (unseen) notifications that can be marked as seen.
When I try rendering only unseen notifications using unless notification.seen it doesn’t update the list because of phx-update="prepend".

When I set a seen class applying display: none; to the notification hides, but I would prefer to remove it and hit the else statement rendering the “No notifications” message.

What this require fetching the whole notifications list again and update it by temporary setting phx-update="replace"?

Recommendations are welcome, thanks in advance!

<div id="notifications-dropdown">
  <%= if Enum.any? @notifications do %>
  
    <ul phx-update="prepend" id="notification-list">
      <%= for notification <- @notifications do %>
        <%= unless notification.seen do %>
          <li id="notification-#{notification.id}" class="notification">
            <p><%= notification.message %></p>
            <button phx-click="toggle-seen"
                    phx-value-id="<%= notification.id %>">
              Mark as seen
            </button>
          </li>
        <% end %>
      <% end %>
    </ul>

  <% else %>
    <p>No notifications</p>
  <% end %>
</div>

def handle_event("toggle-seen", %{"id" => notification_id}, socket) do
  notification = Repo.get(Notification, notification_id)

  {:ok, notification} =
    Notifications.toggle_seen_status(
      notification,
      %{seen: !notification.seen},
      socket.assigns.user
    )
    
  socket =
    update(
      socket,
      :notifications,
      fn notifications -> [notification | notifications] end
    )

  {:noreply, socket}
end