In Phoenix Live View, deleting an item removes DOM element put there by a phx-hook

Question

In a contrived chat app, I added a smiley face to a div via a phx-hook. After adding a chat, the smiley face is still there:

However, after deleting the chat, the smiley disappears:

How can I prevent it from disappearing?

Answer 1

It can be fixed by adding phx-update="ignore" to the div whose contents are generated by JavaScript:

<div id="smiley" style="font-size: 80px" phx-hook="Smiley" phx-update="ignore"></div>