JS 留言板案例

css代码

 ul {
             list-style: none;
         }

         ul li {
             background-color: pink;
             line-height: 40px;
             margin: 10px;
             width: 300px;
         }

         ul li a {
             color: red;
             float: right;
             text-decoration: none;
         }

HTML代码

 <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
    </ul>

JS代码

         var btn = document.querySelector("button")
         var text = document.querySelector("textarea")
         var ul = document.querySelector("ul")
         btn.onclick = function () {
             if (text.value == '') {
                 alert("您没有留言")
                 return false;
             } else {
                 // 创建元素
                 var li = document.createElement("li")
                 // 添加内容
                 li.innerHTML = text.value + "<a href='javascript:;'> 删除</a>"
                 // 添加元素
                 ul.insertBefore(li, ul.children[0]);

                 // 删除元素  删除的是当前链接的li
                 var as = document.querySelectorAll("a")
                 for (var i = 0; i < as.length; i++) {
                     as[i].onclick = function () {
                         ul.removeChild(this.parentNode) //删除的是li当前a所在的li
                     }
                 }

             }
         }

效果图