HTML
<section>
<textarea cols="30" rows="10"></textarea>
<button>发送</button>
<ul></ul>
</section>
JavaScript
let text = document.querySelector('textarea')
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
btn.addEventListener('click', ()=> {
if(!text.value) alert('留言不能为空')
else{
let node = document.createElement('li')
node.innerHTML = `${text.value}<a href="#">删除</a>`
ul.insertBefore(node, ul.children[0])
text.value = ''
let a = document.querySelector('a')
// 删除法1:
//a.onclick = ()=> ul.removeChild(node)
// 删除法2:
a.onclick = function() {
ul.removeChild(this.parentNode)
}
}
})
CSS
button {
display:block;
width: 216px;
background-color: #f64;
border-radius: 5px;
border: 1px solid #f64;
color: white;
cursor: pointer;
font-family: '微软雅黑';
}
ul li{
list-style: none;
width: 180px;
margin-top: 2px;
background-color:#f64
}
a {
float: right;
text-decoration: none;
color:white;
font-size: 12px;
line-height: 20px;
}