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

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

运用到的知识点：

1、获取元素

2、注册事件

3、处理程序

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

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

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

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

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

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

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

 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         width: 300px;
13         height: 200px;
14         margin: 30px auto 30px 30px;
15     }
16     
17     ul {
18         margin-top: 50px;
19     }
20     
21     li {
22         width: 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>

发布留言的功能