[JavaScript] 简易版发布/删除留言案例-CFANZ编程社区

[JavaScript] 简易版发布/删除留言案例

效果浏览：
在这里插入图片描述
当我们在文本框里输入想要发布的内容然后单击发布后：

留言会在下方弹出且文本框中内容清空，下面再发布一条留言：

可以看到最新发布的留言是插入在最上方的，下面我要删除第二条留言就单击对应的删除键：
在这里插入图片描述
示例代码及注释：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                padding: 200px;
            }
            ul li {
                width: 200px;
                background-color: pink;
                margin: 10px;
            }
            li a {
                float: right;
            }
        </style>
    </head>
    <body>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>发布</button>
        <ul></ul>
    </body>
    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //2.注册事件
        btn.onclick = function() {
            if(text.value == '') {
                alert('您没有输入内容');
                return false;
            }
            else{
                 //1.创建元素
                var li = document.createElement('li');
                //2.添加元素  innerhtml能够识别html标签
                li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
                //保证最新的留言在第一个
                ul.insertBefore(li,ul.children[0]);
                text.value = '';//将大文本框中已发布的留言删除
                //删除元素 删除的是当前链接的父亲
                var a = document.querySelectorAll('a');
                for(var i = 0;i<a.length;i++) {
                    a[i].onclick = function() {
                        //node.removeChild(child) 删除的是li是当前a所在的li
                        //li 是 this.parengNode
                        ul.removeChild(this.parentNode);
                    }
                } 
            }
        }
    </script>
</html>

0 条评论