<body>
<h1>留言板</h1>
用户名:<input type="text" id="ipt"><br><br>
<textarea name="" id="tar" cols="100" rows="10"></textarea><br>
<button id="btn">提交</button>
<br>
<div>
<ul id="uls">
<li>
<h4>赵六</h4>
<p>lean name for you are you are how are you</p>
<p class="time">2019/8/12 0:12:00</p>
<p class="time">删除</p>
</li>
</ul>
</div>
<script>//获取标签var ipt=document.getElementById("ipt");//用户名var tar=document.getElementById("tar");//文本域var btn=document.getElementById("btn");//提交var uls=document.getElementById("uls");//uldel();//页面一加载先删除所有的待删除数据//单击事件
btn.onclick=function(){
var timer=newDate().toLocaleString();//当前时间 //本地字符串var userName=ipt.value;//用户var text=tar.value;//内容var lis=document.createElement("li");//创建li标签if(userName==""||text==""){
//非空判断alert("用户名或内容不能为空")}else{
lis.innerHTML="<h4>"+userName+"</h4><p>"+text+"</p><p class='time'>"+timer+"</p><p class='time cc del'>删除</p>";
uls.insertBefore(lis,uls.firstChild);}del();//单击事件之后调用};//删除事件functiondel(){
var dels=document.getElementsByClassName("del");//好多删除选项 用循环 id会重名for(var i=0;i<dels.length;i++){
dels[i].onclick=function(){
this.parentNode.remove();//当前的父级元素删除}}}</script>