案例分析：
    (1)当我们把文本域里面的值赋值给li的时候，多添加一个删除的链接。
    (2)需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li。
    (3)阻止链接跳转需要添加javascript：void(0);或者javascript：;

    1. <!DOCTYPE html>
    2. <html>
    4.     <head>
    5.         <meta charset="UTF-8">
    6.         <title></title>
    7.     </head>
    9.     <body>
    11.         <textarea></textarea>
    12.         <button>发布</button>
    13.         <ul></ul>
    15.     </body>
    17.     <script>
    18.         //获取元素
    19.         var btn = document.querySelector("button");
    20.         var text = document.querySelector("textarea");
    21.         var ul = document.querySelector("ul");
    23.         //注册事件(鼠标点击事件)
    24.         btn.onclick = function() {
    25.             //先判断一下
    26.             if(text.value == "") {
    27.                 alert("您没有输入内容");
    28.                 return false;
    29.             } else {
    30.                 //创建节点元素
    31.                 var li = document.createElement("li");
    32.                 //将文本域中输入的内容赋值给节点,并且多添加一个删除的链接
    33.                 li.innerHTML = text.value + "<a href = 'javascript:;'>删除</a>";
    34.                 //添加节点元素(每次鼠标一点击，就往里面添加一个节点)
    35.                 ul.insertBefore(li, ul.children[0]); //把节点添加到最前面(最新留言)
    36.                 //删除元素，删除的是当前链接的li 链接的父亲
    37.                 var as = document.querySelectorAll("a");
    38.                 for(var i = 0; i < as.length; i++) {
    39.                     as[i].onclick = function() {
    40.                         //注意，删除的是链接a 的父亲li
    41.                         ul.removeChild(this.parentNode);//这里的this指的就是as[i]
    42.                     }
    43.                 }
    44.             }
    45.         }
    46.     </script>
    48. </html>