原生js完成发布评论功能

效果图

 搭建基础结构

html

 <div class="box">
    <textarea name="" id="" cols="30" rows="5"></textarea>
    <button>发布</button>
    <ul></ul>
   </div>

css

 .box {
            margin: 100px 500px;
            position: relative;
        }
        textarea {
           outline: none;
           text-indent: 1em;
        }
        ul {
           position: absolute;
           top: 70px;
           left: -40px;
        }
        li {
            margin-top: 5px;
            width: 300px;
            border-bottom: 1px solid black;
            list-style: none;
        }
        li a {
            font-size: 10px;
            float: right;
            text-decoration: none;
            color: #ccc;
        }

js

获取对象

const text=document.querySelector('textarea')
        const button =document.querySelector('button')
        const ul =document.querySelector('ul')

给发布按钮绑定点击事件

首先判断文本框内是否有内容if(){} else(){}，如果没有，弹出提示框，并结束函数

如果有内容，用document.createElement()动态创建元素li,

将文本框内的内容赋值给创建的li，创建a标签，innerHTML可以识别标签

在点击清空文本框中的内容

             button.addEventListener('click',function() {
            
            if(text.value==='') {
                alert('请输入')
                return false
            } else {
                // 创建元素
                var li=document.createElement('li')

                li.innerHTML=text.value+'<a href="javascript:;">删除</a>'

                text.value=''
            }

再将li添加进ul

用inserBefore(),将li放在最前面

 // 添加元素
            ul.insertBefore(li,ul.children[0])

点击删除

用querySelectorAll获取全部的a

遍历a

用removeChild()删除子节点

this.parentNode指的是当前被点击a的父元素li

          var as=document.querySelectorAll('a')
            for(let i=0;i<as.length;i++) {
                as[i].addEventListener('click',function(){
                    // 删除节点
                    ul.removeChild(this.parentNode)
                })
            }

如有错误，积极接受指正