实现一个简单的发送效果（练习）

实现一个发送效果和删除效果

知识点：

        非空验证:用一个判断。

        操作节点：熟悉创建节点document.createElement()

        删除元素：removeChild() 通过父元素删除子元素  ||  remove() 自己删除自己

        添加内容：innerHTML ；

        追加到哪一个标记：appendChild() 追加的内容只能放在已经有的标记后面  || insertBefore() 把新创建的标记追加到已经存在标记的前面

html

        <div class="box">
                <textarea></textarea>
                <button>发送</button>
            <ul>
                <!-- <li>
                    <span>删除</span>
                </li> -->   这里的li我们使用自己动态创建一个
            </ul>
        </div>

css

 *{
    margin: 0;
    padding: 0;
 }
.box{
    width: 400px;
    height: 400px;
    margin: 50px auto;
}
.box textarea{
    width: 400px;
    height: 100px;
    resize: none;
}
.box button{
    float: right;
    width: 100px;
    height: 40px;
    border: none;
    cursor: pointer;
}
.box ul{
    width: 400px;
    height: 35px;
    margin-top: 50px;    
}
.box ul li{
    width: 400px;
    height: 35px;
    list-style: none;
    position: relative;
    line-height: 35px;
    border-bottom: 1px dashed red;
}
.box ul li span{
    position: absolute;
    right: 0;
    cursor: pointer;
}
.box ul li:active{
    display: block;   
}

如上的css 不局限，根据自己需求的样式写，核心是当点击发送按钮后创建li标签，并获取输入的值value

js:

//获取元素
let txt = document.querySelector('textarea')
let btn = document.querySelector('button')
let ul = document.querySelector('ul')   

//绑定事件
btn.οnclick=function(){
    //非空验证
    if(txt.value.trim()==''){
        alert('请输入内容')
        return
    }  

let li=document.createElement('li')
    li.innerHTML=txt.value+'<span>删除</span>'
    // ul.appendChild(li)//追加在前
    let firstli=document.querySelectorAll('li')[0]
    ul.insertBefore(li,firstli)

//点击删除
    let del = document.querySelectorAll('span')
    for(let i= 0;i<del.length;i++){
        del[i].οnclick=function(){
            del[i].parentNode.remove() //删除父元素li
        }
    }
    txt.value=''  //当每次输入完毕发送后清空
}

注意：先把html 和 css 样式写好后再去动态的创建