JavaScript留言板

<div>

              <textarea id="msg"></textarea><br/>

              <input type="button" value="提交留言"/>

              <ul>

                 

                  <li>默认信息1，<a href="javascript:;">删除</a></li>

                  <li>默认信息2，<a href="javascript:;">删除</a></li>

              </ul>

             

        </div>

       

        <script>

            var btn = document.querySelector('input');

            var msg = document.querySelector('#msg');

            var lis = document.querySelectorAll('ul li');

           

            var ulNode =document.querySelector('ul');

            btn.onclick = function(){

                var limsg = msg.value +'时间：'+ new Date().toLocaleString();

             // console.log(limsg);

                if(msg.value==''){

                    alert('请输入内容');

                    return;

                }

             

             limsg = limsg+'<a href="javascript:;">删除</a>';

             // console.log(limsg);

             

             //创建li标签节点

             var li = document.createElement('li');

             li.innerHTML =limsg;

             //插入li标签节点

             //再ul标签的最前面插入li标签

             ulNode.insertBefore(li,ul.children[0]);

             

            }

           

            //删除列表

            // for (var i = 0; i < lis.length; i++) {

            //  lis[i].addEventListener('click',function(e){

            //      // console.log(e.target);

            //      alert('点击了');

            //      // 注意 直接这样写是不行的 默认的li标签监听事件 加上了 但是后面新提交的信息  没有加上 所以 我们的监听事件需要绑定给父级标签 ul 然后通过事件对象来获得当前的对象

            //  })

            // }

           

            ulNode.addEventListener('click',function(e){

                  console.log(e.target);//指向就是a标签

                 // 我们通过a标签获得父级li标签 e.target.parentNode

                 var delLi =  e.target.parentNode;

                 // 通过ul标签移除li标签

                 // ulNode.removeChild(delLi);

                 this.removeChild(delLi);

            })

           

        </script>