增加删除控件——DOM节点的添加删除

最新推荐文章于 2022-05-19 20:37:17 发布

转载最新推荐文章于 2022-05-19 20:37:17 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1379006/blog/178538

文章标签：

#python #javascript #ViewUI

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了文件上传功能。通过点击“添加记录”按钮可以动态添加文件输入框和对应的删除按钮。每添加一项文件上传选项时，都会生成一个带有‘添加附件’值的文件输入框及一个‘删除’按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

AddDeleteNodel.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>AddDeleteNodel.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript">
			function $(id){
				return document.getElementById(id);
			}
			function addFile(){
				var fileSection = $("files");
				fileSection.innerHTML += '<div><input type="file" value="添加附件" /><input type="button" value="删除" onclick="deleteFile(this)" /><br/></div>';
			}
			function deleteFile(obj){
				obj.parentNode.parentNode.removeChild(obj.parentNode);
			}
			function addFile2(){
				var fileSection = $("files");
				fileSection.createElement("input");
				fileSection.innerHTML += '<div><input type="file" value="添加附件" /><input type="button" value="删除" onclick="deleteFile(this)" /><br/></div>';
			}
		</script>

	</head>

	<body>
		<input type="button" value="添加记录" onclick="addFile()" />
		<hr />
		<div id="files">
		</div>

	</body>
</html>

转载于:https://my.oschina.net/u/1379006/blog/178538