<!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>
