How to remove an element from a list on click?

[aycyang]

Let’s say I have a List String in my model, and in my view I’m using List.map to convert each String to an HTML element so that I can display them all. Now I’d like to make it so that when I click on one of these HTML elements, the corresponding String gets removed from the list in the model.

How should I go about doing this? I thought about adding an onClick handler to each HTML element, but I can’t think of a message I could send back to the update function that would explain how to update the model.

[lydell]

You’re on the right track! You could have a message like ClickedRemoveButton Int where the Int is the index in the list that should be removed.

[adauguet]

You might need List.indexedMap which allow mapping a List while providing the current index.

[aycyang]

Thank you both! That approach works for me. I forgot that I could associate data with custom types Another reason I got stuck might have been because my brain kept going back to how I might have done this in other languages (with all their mutability and references).