前端评论区：实时发布与互动-优快云博客

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .wrap {
            width: 900px;
            margin: 0 auto;
            /* background-color: rebeccapurple; */
            padding: 50px;
            box-sizing: border-box;
        }

        img {
            width: 50px;
            height: 50px;
            margin-bottom: 40px;
        }

        .wrap ul li {
            margin-bottom: 10px;
        }

        .wrap ul li:nth-child(1) {
            display: flex;
        }

        .wrap ul li:nth-child(1) span {
            margin-top: 17px;
            margin-left: 5px;
        }

        .wrap ul li:nth-child(2) {
            position: relative;
        }

        .wrap ul li:nth-child(2) textarea {
            width: 700px;
            height: 90px;
            margin-left: 13px;
        }

        .wrap ul li:nth-child(2) button {
            width: 60px;
            height: 30px;
            border-radius: 30px;
            border: none;
            background-color: green;
            position: absolute;
            top: 55px;
            right: 45px;
            color: white;
        }

        .wrap ul li:nth-child(3) {
            display: flex;
        }

        .wrap ul li:nth-child(3) span {
            margin-top: 3px;
            margin-left: 5px;
        }

        .wrap ul li:nth-child(3) h3 {
            font-size: 20px;
        }

        .wrap ul .box2 {
            padding-top: 20px;
            display: flex;
            border-bottom: 1px solid #f2f2f2;
        }

        .wrap ul .box2 .box1 {
            margin-left: 13px;
            position: relative;
        }

        .wrap ul .box2 .box1 button {
            width: 60px;
            height: 30px;
            position: absolute;
            border-radius: 5px;
            top: 50px;
            left: 660px;
            background-color: green;
            color: white;
            border: none;
        }

        span {
            color: grey;
        }

        .a1 {
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 标题 -->
        <ul>
            <li>
                <h1>评论</h1>
                <span>
                    (3902)
                </span>
            </li>
            <li>
                <img src="./1.jpg" alt="">
                <!-- <input type="text" placeholder="来说两句吧~" value=""> -->
                <textarea name="" id="" cols="30" rows="10">来说两句吧~</textarea>
                <button>发布</button>
            </li>
            <li>
                <h3>精彩评论</h3>
                <span>
                    (49)
                </span>
            </li>
            <li>
                <div class="box2">
                    <img src="./1.jpg" alt="">
                    <div class="box1">
                        <p>珂Jessica</p>
                        <p class="a1">哈哈哈</p>
                        <button>删除</button>
                    </div>
                </div>
            </li>
            <li>
                <div class="box2">
                    <img src="./1.jpg" alt="">
                    <div class="box1">
                        <p>珂Jessica</p>
                        <p class="a1">发斯蒂芬</p>
                        <button>删除</button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <script>
        
        var btn = document.querySelector("ul").getElementsByTagName("button");
        // 1.删除评论
        for (var i = 0; i < btn.length; i++) {
            btn[i].onclick = function () {
                // 把对应的父元素删除
                this.parentNode.parentNode.remove()
            }
        }

        // 2.发布评论
        var submit = document.querySelector("button");
        var text = document.querySelector("textarea");
        var list = document.querySelector("ul");
        submit.onclick = function () {
            var texTarea = text.value
            // 创建li节点
            var createLi = document.createElement("li");
            createLi.innerHTML =  `
            <div class="box2">
                    <img src="./1.jpg" alt="">
                    <div class="box1">
                        <p>珂Jessica</p>
                        <p class="a1">${texTarea}</p>
                        <button>删除</button>
                    </div>
                </div>`
            list.appendChild(createLi);
            // 直接给当前button添加事件
            console.log(createLi);
            var newBtn = createLi.getElementsByTagName("button")[0];
            newBtn.onclick = function () {
                this.parentNode.parentNode.remove()
            }
        }
    </script>
</body>

</html>