javascript之动态添加和删除按钮节点

最新推荐文章于 2023-03-08 13:15:20 发布

mr_tangshuai

最新推荐文章于 2023-03-08 13:15:20 发布

阅读量4.4k

点赞数 2

本文链接：https://blog.csdn.net/mr_tangshuai/article/details/78499044

版权

html 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

11 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.file-item{
				width: 300px;
				height: 30px;
				margin:5px 0;
				box-shadow: 0 0 10px rgba(0,0,0,0.3);
			}
		</style>
	</head>
	<body>
		<h1>文件上传</h1>
		<input type="file" name="file" /><button id='btn'>add more...</button>
		<div id="file-box">
		</div>
		<script>
			$('btn').addEventListener('click',function(){
				//创建DIV
				var fileItem = document.createElement('div');
				fileItem.className = 'file-item';
				
				//创建input元素，type为file,name为file
				var input = document.createElement('input');
				input.type = input.name = 'file';
				fileItem.appendChild(input);
				
				//创建按钮
				var btn = document.createElement('button');
				btn.textContent = '删除';
				fileItem.appendChild(btn);
				
				$('file-box').appendChild(fileItem);
				
				//为按钮设置点击事件(删除)
				btn.addEventListener('click',function(){
					//删除当前按钮节点所在父节点
//					$('file-box').removeChild(this.parentNode);
					this.parentNode.remove();
				})
				
			});
			
			function $(id){
				return document.getElementById(id);
			}
		</script>
	</body>
</html>