求解惑，前端问题

最新推荐文章于 2023-08-29 17:29:08 发布

摇一摇

最新推荐文章于 2023-08-29 17:29:08 发布

阅读量58

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43276431/article/details/124476855

版权

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				padding: 100px;
			}

			textarea {
				width: 200px;
				height: 100px;
				border: 1px solid pink;
				outline: none;
				resize: none;
			}

			ul {
				margin-top: 50px;
			}

			li {
				width: 300px;
				padding: 5px;
				background-color: rgb(245, 209, 243);
				color: red;
				font-size: 14px;
				margin: 15px 0;
			}

			li a {
				float: right;
			}
		</style>
	</head>

	<body>
		<textarea name="" id=""></textarea>
		<button>发布</button>
		<ul></ul>
		<script>
			// 1. 获取元素
			var btn = document.querySelector('button');
			var text = document.querySelector('textarea');
			var ul = document.querySelector('ul');
			// 2. 注册事件
			btn.onclick = function () {
				if (text.value == '') {
					alert('您没有输入内容');
					return false;
				} else {
					var li = document.createElement('li');
					li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
					ul.insertBefore(li, ul.children[0]);
					var as = document.querySelectorAll('a');
					for (var i = 0; i < as.length; i++) {
            as[i].addEventListener('click',fn)
					}
					
				}
				function fn(){
						console.log(this.parentNode);
									ul.removeChild(this.parentNode);
					}
			};
			// fn 放在这里就不会报错
		</script>
	</body>
</html>