015-删除节点

最新推荐文章于 2024-04-15 13:46:07 发布

编码的三叔

最新推荐文章于 2024-04-15 13:46:07 发布

阅读量198

点赞数

分类专栏： DOM详解 DOM详解文章标签： JS添加删除HTML元素

本文链接：https://blog.csdn.net/ppwwp/article/details/88561289

版权

DOM详解同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

DOM详解

16 篇文章 0 订阅

订阅专栏

删除HTML元素也是通过删除节点来完成的。对于普通的HTML元素，可通过方法来删除节点，而列表框，下拉菜单，表格则亚欧额外的方法来删除HTML元素。

删除节点通常借助于父节点，Node对象提供了如下方法来删除子节点。

removeChild(oldNode):删除oldNode子节点。

在父节点中删除该节点后，该子节点代表的内容也会消失。下面的代码通过控制HTML增加、刪除节点来使页面中的表格出现，隐藏。

	<!DOCTYPE html>
	<html>
		<head>
			<meta http-equiv="content-type" content="text/html"/>
			<title>动态添加表格内容</title>
			
		</head>
		<body id='test'>
			<input id="add" type="button" value="增加" disabled onclick="add()"/>
			<input id="del" type="button" value="删除"  onclick="del()"/>
			<div id="target" style="width: 240px;height: 50px;border:1px solid black">
				被控制的目标元素
			</div>
			<script type="text/javascript">
				//获取body元素
				var body = document.getElementById("test");
				//获取被控制的目标元素
				var target = document.getElementById("target");
				var add = function(){
					//添加目标元素
					body.appendChild(target);
					document.getElementById("add").disabled = "disabled";
					document.getElementById("del").disabled = "";
				}
				var del = function(){
					//删除目标元素
					body.removeChild(target);
					document.getElementById("del").disabled = "disabled";
					document.getElementById("add").disabled = "";
				}
					
				
			</script>
		</body>
	</html>

在这里插入图片描述

编码的三叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
015-删除节点

删除HTML元素也是通过删除节点来完成的。对于普通的HTML元素，可通过方法来删除节点，而列表框，下拉菜单，表格则亚欧额外的方法来删除HTML元素。删除节点通常借助于父节点，Node对象提供了如下方法来删除子节点。removeChild(oldNode):删除oldNode子节点。在父节点中删除该节点后，该子节点代表的内容也会消失。下面的代码通过控制HTML增加、刪除节点来使页面中的表...
复制链接

扫一扫