<textarea></textarea>
<button>发送</button>
<ul></ul>
HTML代码
//获取元素
var btn = document.querySelector('button');
var text = document.querySelector('textarea');
var ul = document.querySelector('ul');
js代码 首先获取元素
//给btn按钮绑定点击事件
btn.onclick = function(){
//判断文本框里是否为控
if(text.value == ''){
alert('请输入....');
}else{
//利用createElement创建元素节点li
var li = document.createElement('li');
//把文本域里的值给新创建的元素节点 text.value(文本域的值)
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
//把创建的元素节点添加到ul里 ul.children[0](使新添加的元素节点永远在第一排)
ul.insertBefore(li,ul.children[0]);
//删除节点,删除的是当前a所在的li 删除的是a的父亲li
var as = document.querySelectorAll('a'); //获取元素
//循环
for(var i = 0;i<as.length;i++){
as[i].onclick = function(){
//this当前a parentNode获取a的父对象 this.parentNode是当前a的父亲li
//删除节点,必须是删除父亲中的一个儿子 this.parentNode(li)的父亲是ul 所以前面是ul
ul.removeChild(this.parentNode);
}
}
}
}
</script>
首选给btn按钮注册点击事件
text.value判断文本域里是否为空,如果为空alert('请输入....');
如果不为空
利用createElement创建元素节点
点击发送之后文本域的值要赋给创建的元素节点li 但是要在创建了有了li之后赋值 li.innerHTML = text.value
+ "<a href='javascript:;'>删除</a>"; 后面加一个删除
添加节点 把创建的节点添加到 ul 里 ul.insertBefore(li,ul.children[0]);
var as = document.querySelectorAll('a'); 获取元素
循环添加鼠标点击事件
注意:删除节点是删除父亲中的一个儿子 a是li的一个儿子,而我们是要删除整个li
this.parentNode 当前a的父对象,也就是li li的父级是ul
ul.removeChild(this.parentNode); 所以删除节点是这样