<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
margin-top: 50px;
}
ul li {
width: 300px;
padding: 5px;
background-color: pink;
color: green;
font-size: 14px;
margin: 15px 0 ;
}
ul li a {
float: right;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
<li>啦啦啦 <a href="javascript:;">删除</a></li>
</ul>
<script>
var text = document.querySelector('textarea');
var btn= document.querySelector('button');
var ul = document.querySelector('ul');
btn.onclick = function(){
if (text.value == '') {
alert('您尚未输入任何内容');
return false;
}
else {
var li = document.createElement('li');
li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
//注意这里不能用 li.value = text.value 要用 innerHTML
// ul.appendChild(li);
ul.insertBefore(li,ul.children[0]); //用了这个最新的评论会在上面
var pp = document.querySelectorAll('a');
for(var i=0; i<pp.length; i++) {
pp[i].onclick = function() {
console.log(pp[i]);
ul.removeChild(this.parentNode); //parentNode 是a 元素的父亲 也就是li元素 ,而li使我们要删除的ul的子元素
}
}
}
}
</script>
</body>
</html>
自己出现的问题就是把
var pp = document.querySelectorAll('a');
for(var i=0; i<pp.length; i++) {
pp[i].onclick = function() {
console.log(pp[i]); ul.removeChild(this.parentNode); //parentNode 是a 元素的父亲 //也就是li元素 , 而li使我们要删除的ul的子元素
}
}
上面这一部分写在了外面导致每次只能删除第一个的 其他的删除不了,为了把每一个都删掉,需要不断刷新留言板的数量。