Ember Octane is here! A lot has changed since Ember 3.14, including these Guides. Read more in the Ember Blog.

Old Guides - You are viewing the guides for Ember v1.10.0. VIEW v3.15.0
Edit Page

Deleting a Model


TodoMVC displays a button for removing todos next to each todo when its <li> is hovered. Clicking this button will remove the todo and update the display of remaining incomplete todos and remaining completed todos appropriately.

In index.html update the static <button> element to include an {{action}} Handlebars helper:

{{! ... additional lines truncated for brevity ... }}
<button {{action "removeTodo"}} class="destroy"></button>
{{! ... additional lines truncated for brevity ... }}

This will call the removeTodo action defined in the previous chapter and will delete the todo locally and then persist this data change.

Because the todo is no longer part of the collection of all todos, its <li> element in the page will be automatically removed for us. If the deleted todo was incomplete, the count of remaining todos will be decreased by one and the display of this number will be automatically re-rendered. If the new count results in an inflection change between "todo" and "todos" this area of the page will be automatically re-rendered.

Reload your web browser to ensure that there are no errors and the behaviors described above occurs.

Note: The current action may be invoked twice (via acceptChanges) leading to an exception. For details on how to handle this situation, please see the latest version of the TodoMVC source.

Live Preview

Ember.js • TodoMVC

Additional Resources