//需求：对列表的增删改
//代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.11.1.min.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } .list{ list-style: none; width: 400px; margin: 50px auto; } .list li{ border: 1px solid #ccc; margin-bottom: 20px; height: 30px; } .list .friut{ line-height: 30px; } .change,.del{ float: right; height: 24px; width: 40px; margin-top: 3px; text-align: center; color: #fff; } .change{ background-color:yellow; margin-left: 10px; } .del{ background-color: red; } .addBtn{ width: 400px; height: 40px; line-height: 40px; text-align: center; background-color: green; margin:0 auto; } </style> </head> <body> <ul class="list"> <li> <span class="friut">西瓜</span> <span class="change">修改</span> <span class="del">删除</span> </li> <li> <span class="friut">苹果</span> <span class="change">修改</span> <span class="del">删除</span> </li> <li> <span class="friut">香蕉</span> <span class="change">修改</span> <span class="del">删除</span> </li> </ul> <div class="addBtn">添加一项</div> <script type="text/javascript"> // 添加按钮的点击事件 $(".addBtn").click(function(){ var res = window.prompt("添加一项"); //弹出添加一项 if (res) { // html（内容字符串） var str = "<span class='friut'>"+res+"</span><span class='change'>修改</span><span class='del'>删除</span>"; $("<li></li>").html(str).appendTo($(".list")); //动态的往类名为list的添加一个子元素 } }); // 事件委托，将删除和修改按钮的事件（通过事件冒泡）委托给.list $(".list").click(function(e){ // console.log(this); // event 对象 记录事件发生时的相关信息的对象 // event.target 事件发生的源目标 //event.target -><span class='del'>删除</span> //this->.list if ($(e.target).text()=="删除") { var res = window.confirm("是否确定删除"); if (res) { // 移除li $(e.target).parent().remove(); } }else if ($(e.target).text()=="修改") { var res = window.prompt("确认修改？"); if (res) { // 将friut类的span标签内容修改 $(e.target).prev().text(res); } } }) </script> </body> </html>