js原生实现留言板功能

功能实现：
点击提交按钮，讲输入框中文字添加到显示留言下，并清空文本框；点击删除，将添加的姓名与内容以及删除按钮都删除。
代码如下：
css:

<style>
        *{
            margin: 0;
            padding: 0;
        }
       .box{
           width: 500px;
           border: 1px solid red;
           margin: 0 auto;
           
       }
       .review{
           height: 250px;
           background-color: blanchedalmond;
       }
       #uu{
           background-color: cyan;
       }
       #uu li{
           list-style: none;
       }
    </style>

html中：

<!-- 点击提交，将输入框文中添加到显示留言下，并清空文本框 -->
    <div class="box">
        <div class="review">
        姓名：<input type="text" id="names"><br>
        内容：<textarea name="" cols="30" rows="10" id="concent"></textarea>
        &emsp;&emsp;<button onclick="add()">提交</button>
        </div>
        <div class="show">
        <h3>显示留言</h3><br>
        <ul id="uu">
            <li>
                张三
                <p>我要好好工作<a href="#" onclick="del(this)">删除</a></p>
            </li>
        </ul>
    </div>
</div>

js中：

<script>
        //获取元素
        var use = document.getElementById('names');
        var concent = document.getElementById('concent');
        var uu = document.getElementById('uu');

        //显示用户输入内容
        //当我们点击添加的时候触发这个函数 如果名字或者内容为空直接提示并且返回
        function add(){
            if(use.value == '' || concent.value == ''){
                alert('请输入内容');
                return;
            }

            //创建一个元素li
            var li = document.createElement('li');
            //给添加用户输入的内容
            li.innerHTML = use.value + '<p>' + concent.value + '<a href="#" οnclick="del(this)">删除</a>';
            uu.appendChild(li);

            use.value = '';
            concent.value = '';
        }
        //this指得是当前对象
        function del(e){
            e.parentElement.parentElement.remove();
        }
        
    </script>