HTML代码
<div>
<textarea name="" id="tas" cols="30" rows="10"></textarea>
<br>
<input type="button" value="提交">
<ul> </ul>
</div>
div>textarea{
width: 500px;
height: 100px;
}
div>ul>li{
height: 35px;
line-height: 35px;
border-bottom: 1px solid gray;
margin-top: 10px;
}
div>ul>li>a{
float: right;
}
JS代码
//获取元素
let tas=document.querySelector('#tas');
let int=document.querySelector('input');
let uls=document.querySelector('ul');
let lis=document.querySelector('ul li');
//给input绑定点击事件
int.onclick=function(){
//获取当前时间存放到textarea文本域里面
let times=tas.value + new Date().toLocaleString();
//判断tas.value==''值是空的时候
if(tas.value==''){
//把输入的文本返回tas.value==''
alert('请输入内容');
return
}
//用字符串将时间和a标签内容串联
times=times+'<a href="javascript:;">删除</a>';
//创建一个li元素
let li=document.createElement('li');
//将times内容放入li文本里面
li.innerHTML=times;
//获取ul元素
let ul=document.querySelector('ul')
//通过索引把li插入ul
ul.insertBefore(li,ul.children[0]);
}
//绑定监听事件
uls.addEventListener('click',function(e){
//我们通过a标签获得父级li标签 e.target.parentNode
let delli=e.target.parentNode;
//点击删除当前的li
this.removeChild(delli)
})
效果图