In the last episode, we added filtering to the TodoMVC application. Today, let's add the ability to remove items when they are completed.

The core pieces are already in the application: onClick and List.filter. We just want to make the destroy button send a new Delete Todo message and handle it in our update function.

First, let's add the behaviour to the update function:

update : Msg -> Model -> Model
update msg model =
  case msg of
        -- ...
        Delete todo ->
            { model | todos = List.filter (\mappedTodo -> todo.identifier != mappedTodo.identifier) model.todos }

This is what we want to do in theory, but in practice it's wrong. That's because we haven't seen the not equal operator yet in Elm. That operator actually looks like this:

        Delete todo ->
            { model | todos = List.filter (\mappedTodo -> todo.identifier /= mappedTodo.identifier) model.todos }

So sorry for the misdirection, but I wanted to call it out specifically.

Now, all we need to do is to handle the onClick message in the todoView:

todoView : Todo -> Html Msg
todoView todo =
    li [ classList [ ( "completed", todo.completed ) ] ]
        [ div [ class "view" ]
            [ input
                [ class "toggle"
                , type_ "checkbox"
                , checked todo.completed
                , onCheck (\_ -> Complete todo)
                ]
                []
            , label [] [ text todo.title ]
            , button
                [ class "destroy"
                , onClick (Delete todo) -- <--
                ]
                []
            ]
        ]

With that, you should be able to refresh the page and successfully remove Todo items from the list. I hope you enjoyed it. See you soon!