DOM实战-js todo

需求：

实现一个如下页面：

在输入框输入信息然后点击add之后如下所示：

然后点击delete删除该条信息。

实现代码：

HTML：

 1 <!-- author: wyb -->
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>js todo</title>
 7     <style>
 8         *{
 9             margin: 0;
10             padding: 0;
11         }
12         .container{
13             width: 60%;
14             margin: 0 auto;
15         }
16     </style>
17 </head>
18 <body>
19 
20 <div class="container">
21     <input type="text" id="input">
22     <button id="button-add">add</button>
23     <div class="todo-list">
24         <!--<div class="todo-cell">-->
25             <!--<span>吃饭</span>-->
26             <!--<button class="button-delete">delete</button>-->
27             <!--<button id="button-update">update</button>-->
28         <!--</div>-->
29     </div>
30 </div>
31 
32 <script src="todo.js"></script>
33 
34 </body>
35 </html>

JavaScript：

 1 /*
 2 1, 给 add button 绑定事件
 3 2, 在事件处理函数中, 获取 input 的值
 4 3, 用获取的值 组装一个todo-cell HTML 字符串
 5 4, 插入todo-list 中
 6 */
 7 
 8 
 9 // 封装输出
10 var log = function() {
11     console.log.apply(console, arguments)
12 };
13 
14 
15 // 字符串处理:
16 var todoTemplate = function (todo) {
17     // 下面是JavaScript中的字符串替换:
18     var t = `<div class="todo-cell"><span>${todo}</span><button class="button-delete">delete</button></div>`;
19     return t;
20 };
21 
22 
23 // 插入新元素
24 var insertTodo = function (todo) {
25     var todoList = document.getElementsByClassName("todo-list")[0];
26     todoList.insertAdjacentHTML('beforeend', todo);
27 };
28 
29 
30 // add:
31 var buttonAdd = document.getElementById("button-add");
32 buttonAdd.addEventListener('click', function () {
33     log("click");
34 
35     // 获得todo的值:
36     var value = document.getElementById("input").value;
37     log(value);
38 
39     // 获得todo-cell的HTML字符串:
40     var todoCell = todoTemplate(value);
41 
42     // 插入todo-list:
43     insertTodo(todoCell)
44 });
45 
46 
47 /*
48 给 删除 按钮绑定删除的事件
49 1, 绑定事件
50 2, 删除整个todo-cell 元素
51 */
52 
53 
54 // delete:
55 var todoList = document.getElementsByClassName("todo-list")[0];
56 // 事件响应函数会被传入一个参数, 就是事件本身
57 todoList.addEventListener('click', function (event) {
58     // log("click todo-list", event);
59     // 我们可以根据 event.target 来得到被点击的元素
60     var self = event.target;
61     log("被点击的元素是: ", self);
62     // 通过比较被点击元素的 class 来判断元素是否是我们想要的
63     // classList 属性保存了元素的所有 class
64     // 在 HTML 中, 一个元素可以有多个 class, 用空格分开
65     log(self.classList);
66     // 判断是否拥有某个 class 的方法如下
67     if (self.classList.contains('button-delete')) {
68         log('点到了 删除按钮');
69         // 删除 self 的父节点
70         // parentElement 可以访问到元素的父节点
71         self.parentElement.remove()
72     } else {
73         log('点击的不是删除按钮******')
74     }
75 
76 });

猜你喜欢