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;
}