如何删除留言板（要把删除函数卸载添加的里面要不只能删除掉第一个）

本文链接：https://blog.csdn.net/weixin_43190801/article/details/106860025

<!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的子元素
			}
		}

上面这一部分写在了外面导致每次只能删除第一个的其他的删除不了，为了把每一个都删掉，需要不断刷新留言板的数量。