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(当前项)获取到数组当前下标值进行删除