彩虹更新中

导航

 
 留言板实现功能:
1.把文本框里面的留言发表显示出来;
2.显示出来的留言右侧有一个删除链接或按钮
3.点击删除可以把本条留言删除。
为了防止链接跳转,把a的href改成了'javascript:;',注意有一个:哦!
 
<textarea name="" id="text1" cols="30" rows="10"></textarea>
    <button>评论</button>
    <ul></ul>
    <script>
        var text = document.getElementById('text1')
        var btn = document.querySelector('button')
        var ul = document.querySelector('ul')
        btn.onclick = function() {
            if (text.value == '') {
                alert('您输入的内容为空');
                return false;
            } else {
                message = text.value + '<a href="javascript:;"> 删除评论 </a>';
                var li = document.createElement('li');
                li.innerHTML = message;
                ul.insertBefore(li, ul.children[0])
                var as = document.querySelectorAll('a');
                //需要把a的事件添加在创建的下面,如果单独出去定义,就没法实现a的这个事件了
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // node.removeChild(child); 删除的是 li 当前a所在的li  this.parentNode;
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
posted on 2020-03-20 16:29  彩虹更新中  阅读(778)  评论(0编辑  收藏  举报