留言板留言与删除留言的实现

留言板是一种可以用来记录，展示文字信息的载体，有比较强的时效性。

留言板思路:用户要进行留言，就需要留言的文本域，用来给用户编辑留言；

                     当用户编辑完留言，就需要提交留言，这个时候就需要给用户提供存放留言的地方；

                     用户提交留言需要点击按钮，定义按钮让用户提交留言；

                     当用户提交完留言后，要清空文本域，以便用户第二次留言；

                     当用户想要删除留言时，就需要我们来定义一个按钮，以方便用户操作。

下面是对留言板的布局部分：

 <ul class="items"></ul>
    <textarea id="text" id="" cols="30" rows="10"></textarea>
    <button name="" onclick="createLange()">点击留言</button>

 

下面是留言板的js部分:

<script type="text/javascript">
    var item = document.getElementsByClassName("items")[0];  //获取ul元素
        function createLange(){
            var val = text.value;           //获取文本框里的内容
            var li = document.createElement("li");           //创建一个节点
                li.innerHTML = val;             //将从文本框中获取的内容赋值给li
                item.appendChild(li);      //获取子节点 
                text.value = "";        //清空文本域

            //生成一个按钮
            var btn = document.createElement("button");      //创建一个按钮        
                btn.innerHTML = "删除";       //按钮获取内容
                li.appendChild(btn);        //把btn放到li的末尾
                btn.onclick = function(){       //点击按钮时的函数
                    item.removeChild(li);         //将当前选中的子节点删除
                }
        }

    </script>