使用JavaScript实现删除留言的功能

首先实现发布留言的功能：

运用到的知识点：

1、获取元素

2、注册事件

3、处理程序

在处理程序的时候用到的知识点：

创建元素：document.createElement(‘元素名’)；由于先有元素才能赋值，因此需要先进行创建元素。
添加元素：

1、node.appendChild(child）node表示的是父级，而child表示的是子级（后面追加元素，类似于数组中的push）

2、node.insertBefore(child，指定元素）指定元素表示的是：在那一个元素之前

实现的发布留言功能的效果：

实现的该效果的总的代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>删除留言的功能</title>
 9 </head>
10 <style>
11     textarea {
12          300px;
13         height: 200px;
14         margin: 30px auto 30px 30px;
15     }
16     
17     ul {
18         margin-top: 50px;
19     }
20     
21     li {
22          300px;
23         padding: 5px;
24         background-color: rgb(245, 209, 243);
25         color: red;
26         font-size: 14px;
27         margin: 15px 0;
28     }
29     
30     li a {
31         float: right;
32     }
33 </style>
34 
35 <body>
36 
37     <textarea name="" id=""></textarea>
38     <button>发布</button>
39     <ul>
40 
41 
42     </ul>
43 
44     <script>
45         //获取元素
46         var text = document.querySelector("textarea");
47         var btn = document.querySelector("button");
48         var ul = document.querySelector('ul');
49         //注册事件
50         btn.onclick = function() {
51 
52             if (text.value == '') {
53                 alert('输入内容不能为空！！');
54                 return false;
55 
56             } else {
57 
58                 console.log(text.value);
59 
60                 //(1)创建元素
61                 var li = document.createElement('li');
62                 //先有元素才能赋值
63                 li.innerHTML = text.value;
64 
65                 //(2)添加元素
66                 //ul.appendChild(li);
67                 //ul.children[0]元素 之前进行添加li元素                    
68                 ul.insertBefore(li, ul.children[0]);
69 
70             }
71 
72         }
73     </script>
74 
75 </body>
76 
77 </html>

发布留言的功能

实现该效果的js:

 1 <script>
 2         //获取元素
 3         var text = document.querySelector("textarea");
 4         var btn = document.querySelector("button");
 5         var ul = document.querySelector('ul');
 6         //注册事件
 7         btn.onclick = function() {
 8 
 9             if (text.value == '') {
10                 alert('输入内容不能为空！！');
11                 return false;
12 
13             } else {
14 
15                 console.log(text.value);
16 
17                 //(1)创建元素
18                 var li = document.createElement('li');
19                 //先有元素才能赋值
20                 li.innerHTML = text.value;
21 
22                 //(2)添加元素
23                 //ul.appendChild(li);
24                 //ul.children[0]元素 之前进行添加li元素                    
25                 ul.insertBefore(li, ul.children[0]);
26 
27             }
28 
29         }
30     </script>

删除留言：

分析：

1、当把文本域里面的值赋给li的时候，多添加一个删除的按钮的链接

//(1)创建元素
                var li = document.createElement('li');
                //先有元素才能赋值
                li.innerHTML = text.value + '<a href="#">删除</a>';

2、需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li

使用到的知识点：

删除元素：node.removeChild(child) 删除父元素中的某一个子节点

该删除留言注意的点：

删除元素：删除的是当前a链接的li 即是 a链接的父亲

 //删除元素  删除的是当前a链接的父亲 li

                //获取所有的a元素
                var del = document.querySelectorAll('a');
                for (var i = 0; i < del.length; i++) {
                    del[i].onclick = function() {
                        ul.removeChild(this.parentNode); //this.parentNode当前a元素的父节点 即为当前li  这里的this指代的是del[i]
                    }
                }

3、阻止链接跳转需要进行添加javascript:void(0);或者javascript: ;

//(1)创建元素
                var li = document.createElement('li');
                //先有元素才能赋值
                li.innerHTML = text.value + '<a href="javascript:;">删除</a>';

最终实现的删除留言的功能：

实现以上总的效果的代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>删除留言的功能</title>
 9 </head>
10 <style>
11     textarea {
12          300px;
13         height: 200px;
14         margin: 30px auto 30px 30px;
15     }
16     
17     ul {
18         margin-top: 50px;
19     }
20     
21     li {
22          300px;
23         padding: 5px;
24         background-color: rgb(245, 209, 243);
25         color: red;
26         font-size: 14px;
27         margin: 15px 0;
28     }
29     
30     li a {
31         float: right;
32     }
33 </style>
34 
35 <body>
36 
37     <textarea name="" id=""></textarea>
38     <button>发布</button>
39     <ul>
40 
41 
42     </ul>
43 
44     <script>
45         //获取元素
46         var text = document.querySelector("textarea");
47         var btn = document.querySelector("button");
48         var ul = document.querySelector('ul');
49         //注册事件
50         btn.onclick = function() {
51 
52             if (text.value == '') {
53                 alert('输入内容不能为空！！');
54                 return false;
55 
56             } else {
57 
58                 console.log(text.value);
59 
60                 //(1)创建元素
61                 var li = document.createElement('li');
62                 //先有元素才能赋值
63                 li.innerHTML = text.value + '<a href="javascript:;">删除</a>';
64 
65                 //(2)添加元素
66                 //ul.appendChild(li);
67                 //ul.children[0]元素 之前进行添加li元素                    
68                 ul.insertBefore(li, ul.children[0]);
69 
70                 //删除元素  删除的是当前a链接的父亲 li
71 
72                 //获取所有的a元素
73                 var del = document.querySelectorAll('a');
74                 for (var i = 0; i < del.length; i++) {
75                     del[i].onclick = function() {
76                         ul.removeChild(this.parentNode); //this.parentNode当前a元素的父节点 即为当前li  这里的this指代的是del[i]
77                     }
78                 }
79 
80 
81             }
82 
83         }
84     </script>
85 
86 </body>
87 
88 </html>

留言功能小案例