css部分:
#name{
width: 400px;
height:300px;
}
HTML部分:
<textarea id="name"></textarea><br/>
<input type="button" value="点击提交">
<ul>
</ul>
js部分:
var input =document.querySelector('input');
var textarea=document.getElementById('name');
var uls=document.querySelector('ul');
input.οnclick=function(){
var text=textarea.value+'时间:'+new Date().toLocaleDateString();
//创建ul里面的li
if(textarea.value==''){
alert('不能输入空值');
return;
}
var lis=document.createElement('li');
lis.innerHTML=text+"<a href='javascript:;'>删除</a>";
var ul=document.querySelector('ul');
ul.insertBefore(lis,ul.children[0]);
//删除元素 删除的是当前的链接的li 它的父亲
}
//利用监听事件实现删除效果
//通过e获得父标签
uls.addEventListener('click',function(e){
var tell=e.target.parentNode;
this.removeChild(tell);
})
解析部分:
获取点击,文本域,ul元素,建立普通点击事件.根据需求,我们采用公用的获取当前时间的方法并且添加文本域内部的内容,使得传给一个
接收变量是text作为值,在下面我们也对其设置一个判断语句,这个判断语句我们用来控制用户是否输入了内容,如果没有输入内容,我们
提醒用户,让他重新输入,如果有内容,便继续向下执行内容,下面的是获取ul里面的li,根据上面的textarea.value可以判断出内容的长度,
会自动生成一个li标签,获取li标签以后,我们还要对li标签里面添加一个a标签作为删除按钮.接着,再获取一个ul内容,切记,这里的ul是
局部变量,上面的ul是全局变量,所以不同,这里获取的ul仅仅在内部才可以获取使用.我们将lis值放入ul中,insertBefore语句是获取父级
将子级值放入ul的子级最前面(从外向里解析,里面是从左向右解析), 上面都执行完之后,我们在外面设置一个删除效果,这里绑定的是全局变量里的ul,采用监听事件的方式,function里面的(e)一个参数,
下面我们获取当前a标签的父级那么就是li标签,最后我们再将父级标签设置为移除.用户点击删除即可实现删除啦,以上是全部的过程与解析