javascript实现列表中点击删除按钮删除当前项

在angular和vue等mv*框架中做的很多的一个案例就是添加列表再删除

最具有代表性的案例就是todos点击打开链接,github地址点击打开链接

点击当前列表项中某一项进行删除:


下面代码以angular为例:

视图层代码:

<li ng-repeat="todo in data">
<label>{{todo.text}}</label>
<button ng-click="remove(todo)">×</button>
</li>

在Controller控制器中定义数组:

$scope.data = [{
	text: '测试1',
	completed: true
},{
	text: '测试2',
	completed: false
}];
添加删除函数:
$scope.remove = function(todo){
	this.data.splice(this.data.indexOf(todo),1);
}

重要思路就是在删除函数中传入当前的列表项,使用indexOf(当前项)获取到数组当前下标值进行删除

posted @ 2018-02-27 01:19  一只京大  阅读(1298)  评论(0编辑  收藏  举报