<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="txt" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
</body>
<script>
// 1.点击发布按钮
// 2.点击后获取到文本域中的内容
// 3.创建了一个li标签
// 4.将文字内容添加到创建的li标签中
// 5.将li插入到ul当中
var txt=document.querySelector("#txt")
var btn=document.querySelector("button")
var ul=document.querySelector("ul")
btn.onclick=function(){
var value=txt.value;
if(value==""){
alert("请输入内容")
}else{
var li=document.createElement("li")
li.innerHTML=value+"<a href='javascript:;'>删除</a>";
ul.appendChild(li)
// 获取所有的删除标签
var a=document.querySelectorAll("a")
// 给删除标签绑定事件
for(var i=0;i<a.length;i++){
a[i].onclick=function(){
// 获取删除整个内容标签
var li=this.parentNode;
// 删除内容
ul.removeChild(li)
}
}
}
// 发布内容以后,清空表单中原来的内容
txt.value=""
}
</script>
</html>
js留言板 带删除功能
最新推荐文章于 2021-10-25 16:24:34 发布