实战迷你留言板学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <form class="comment" id="comment">
        <label for="content">请留言:</label>
        <textarea name="content" id="content" cols="30" rows="5" placeholder="不要超过100个字符"></textarea>
        <button class="submit" type="button" name="submit">提交</button>
      </form>
        <ul class="list">
            <!-- 当点击按钮时其实是删除“删除按钮的父节点” -->
       <!-- <li>hhhhh <button>删除</button></li> -->
        </ul>  
        <script>
     // 1.拿到表单，comment代表当前留言的意思，拿到id属性
     const comment = document.forms.comment;
     // 2.拿到文本域
     const content = comment.content;
     // 3.能拿到提交按钮
     const bth = comment.submit;
     // 4.拿到列表
     const list = document.querySelector('.list');
     // 5.查看
     //  console.log(comment,content,bth,list)
 
     //  给提交按钮添加一个点击事件
     bth.onclick = ev =>{
        // 用户提交的内容用value来表示，content文本域对象，用trim来过滤掉空格
        let value = content.value.trim();
        // 进行判断
        if (value.length > 0 && value.length <= 100) {
            // 表示有内容了，将用户内容插入到列表中，最新的留言在最上面
            // 创建一个li标签
            const li = document.createElement('li');
            // 往里赛内容
            li.textContent=value;
            // 添加下边白色框高度为2
            li.style.borderBottom='1px solid white';
            li.style.minHeight='2em'
            li.style.display = 'flex'; // 使用 Flexbox 布局  
            li.style.alignItems = 'center'; // 垂直居中  
            li.style.justifyContent = 'space-between'; // 水平两端对齐
 
            // 创建一个删除按钮
            const delBth=document.createElement('button')
            // 创建名字
            delBth.textContent = '删除留言';
            delBth.style.float='right'
            delBth.classList.add('del-btn');
            // 创建删除按钮的点击事件
            delBth.onclick = function(){
                // confir对话框，显示两个内容1.确定2.取消
                if (confirm('是否删除？')){
                    // true:删除
                    // 如何获取父元素
                    // ths表示删除按钮,parentNode代表父元素
                    this.parentNode.remove();
                    // 用户反馈
                    alert('删除成功');
                    // 获取焦点
                    content.focus();
                    // 结束
                return false;
                }
            }
 
 
            //  将删除按钮添加到<li>元素中
            li.append(delBth);
 
            // 将新的留言项目放在列表顶部
            list.prepend(li)
            alert('留言成功');
            // 清空文本域
            content.value=null;
            // content.value='';
            // 将焦点放回到文本域
            content.focus();
             
        }else{
            alert('没有输入或超出长度');
            // 将焦点放回到文本域
            content.focus();
            // 结束
            return false;
        }
    }
    </script>
</body>
</html>