简单留言板(本地版本)-2-删除数据

接续上面的简单留言板添加数据功能,下面给大家说一下删除数据功能的实现.

说明:删除数据方法有很多种,这里使用在数据后面追加删除按钮的方式.删除按钮一般在添加数据的同时添加到留言板中.

1. JS实现

在添加数据函数中addMsg(),添加删除按钮创建代码,并且设置删除处理函数.

// 创建删除按钮
var btnDel = document.createElement("button");

// 设置按钮文字
btnDel.innerHTML = "删除";

// 添加数据div
temp.appendChild(btnDel);

// 设置单击事件--单击删除当前数据
btnDel.onclick = function() {
    // 删除按钮所在的div
    msg_board.removeChild(this.parentElement);
};

JS完整代码

2. JQuery实现

在添加数据函数中addMsg(),添加删除按钮创建代码,并且设置删除处理函数.

// 创建删除按钮
var btnDel = $("<button>");

// 设置按钮文字
btnDel.text("删除");

// 添加数据div
temp.append(btnDel);

// 设置单击事件--单击删除当前数据
btnDel.click(function() {
    // 删除按钮所在的div
    $(this).parent().remove();
});

JQuery完整代码

3. AngularJS实现

1. 在HTML的留言数据后直接追加上删除按钮,并在按钮上添加删除的事件函数

<button type="button" ng-click="delMsg(m)">删除</button>

2. 在控制器中实现单击删除函数

// 删除
$scope.delMsg = function(m) {
    // 查找删除元素的位置
    var index = $scope.messages.indexOf(m);

    // 如果元素存在则删除
    if (-1 !== index) {
        $scope.messages.splice(index, 1);
    }
};

AngularJS完整代码

如有任何疑问，欢迎下面留言