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>