Step 7 - Delete contact button
-
Add delete link to contact's template:
<div class="media-heading"> <h3> <%- name %> <small> <a href="#contacts/delete/<%- id %>" class="delete-contract"> <span class="glyphicon glyphicon-trash"></span> </a> </small> </h3> </div>
-
Add click event handler to contact view and make console log on click:
events: { 'click .delete-contract': 'onClickDelete' }, /* ... */ onClickDelete: function(e) { e.preventDefault(); console.log('Delete'); }
-
Delete contact from collection on click:
onClickDelete: function(e) { e.preventDefault(); this.model.collection.remove(this.model); }
-
Remove view on model remove:
initialize: function() { this.listenTo(this.model, 'remove', this.remove); },