有两种方法，可以删除掉应用里面单个的任务 ... 先看一下完成以后的项目 ... 鼠标放在任务的标题上 ... 在它的右边会显示一个叉号，点一下它 ... 可以删除掉任务 ... 被删除的任务会立即从界面上移除掉 ...

另外还有一种可以删除任务的方法 .. 双击任务的标题 ... 然后请空任务的标题 ... 按一下回车，或者点一下其它的地方 ... 这样也会删除掉任务项目。

先去实现一下用第一种方法删除单个任务的功能 ... 我们需要去在任务项目的模板里面去添加一个删除按钮 ...

先打开应用的主页 index.html

打开定义任务项目模板的位置 .. 然后在显示任务标题的这个 label 标签的下面，去添加一个 button 标签 .. 在这个标签上，再加上一个 destroy 类 ...

这就是删除任务用的按钮 ... 保存一下 ...

视图

下面，我们再到任务的视图里面去监听一下这个按钮的点击事件 ... 发生点击事件以后就去把任务模型删除掉。

打开任务的视图 ... 在 js 里面的 Views 目录下面的 TodoView.js 这个文件里面 ...

找到 events 这个属性 ...

在这里，再添加一个要监听的 DOM 事件 ... 事件的类型是 click ，点击事件 ... 这个事件是发生在 .destroy 这个类的元素上 ... 也就是那个用来删除任务的按钮 ...

事件发生以后，去执行一下 clear 这个方法 ...

'click .destroy' : 'clear'

在下面，我们再去创建这个方法 ...

clear: function() {}

它要做的事儿就是去把任务模型删除掉 ... 使用模型的 destroy 这个方法 ...

this.model.destroy();

测试

下面，我们可以去浏览器上试一下 .. 先保存 ... 回到浏览器 ..

打开应用的首页 ... 刷新 ..

鼠标放到任务标题的上面 ... 会显示出一个删除按钮 ... 这个按钮的样式已经在应用的样式表里定义好了 ...

点击这个按钮 ... 会删除掉当前的这条任务 ...

不过在应用的界面上，没有立即做出反应 ... 我们需要再刷新一下 ..

在下面的视频里，我们可以改进一下这个删除的功能。点击删除按钮以后，会在界面上立即做出反应，把删除掉的任务从界面上移除掉。