接续上面的简单留言板添加数据功能,下面给大家说一下删除数据功能的实现.
说明:删除数据方法有很多种,这里使用在数据后面追加删除按钮的方式.删除按钮一般在添加数据的同时添加到留言板中.
1. JS实现
在添加数据函数中addMsg(),添加删除按钮创建代码,并且设置删除处理函数.
// 创建删除按钮
var btnDel = document.createElement("button");
// 设置按钮文字
btnDel.innerHTML = "删除";
// 添加数据div
temp.appendChild(btnDel);
// 设置单击事件--单击删除当前数据
btnDel.onclick = function() {
// 删除按钮所在的div
msg_board.removeChild(this.parentElement);
};
2. JQuery实现
在添加数据函数中addMsg(),添加删除按钮创建代码,并且设置删除处理函数.
// 创建删除按钮
var btnDel = $("<button>");
// 设置按钮文字
btnDel.text("删除");
// 添加数据div
temp.append(btnDel);
// 设置单击事件--单击删除当前数据
btnDel.click(function() {
// 删除按钮所在的div
$(this).parent().remove();
});
3. AngularJS实现
- 在HTML的留言数据后直接追加上删除按钮,并在按钮上添加删除的事件函数
<button type="button" ng-click="delMsg(m)">删除</button>
- 在控制器中实现单击删除函数
// 删除
$scope.delMsg = function(m) {
// 查找删除元素的位置
var index = $scope.messages.indexOf(m);
// 如果元素存在则删除
if (-1 !== index) {
$scope.messages.splice(index, 1);
}
};
如有任何疑问，欢迎下面留言
