JS学习-16.删除元素的方法

最新推荐文章于 2024-04-18 20:20:27 发布

原创最新推荐文章于 2024-04-18 20:20:27 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

js 专栏收录该内容

18 篇文章

订阅专栏

本文通过示例讲解了如何使用JavaScript的removeChild和remove方法删除DOM元素。首先获取所有span元素并打印，然后演示删除div1内的所有span元素，最后移除特定id为span1的元素。

删除子级元素 removeChild
删除自身元素 remove

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>删除子级元素</title>
	</head>
	<body>
		<div id='div1'>
			<span>
				123
			</span>
			<span>456</span>
			<span id='span1'>789</span>
		</div>
		<script type="text/javascript">
		/**
		 * removeChild 删除子级元素
		 * remove 删除自身元素
		 */
			allSpan=document.getElementsByTagName('span');//获取所有的span元素
			console.log(allSpan);//打印获取的span
			//div1.removeChild(allSpan[0]);//删除第一个span元素
			//删除所有的span元素
			for(var i=0;i<2;i++){
				div1.removeChild(allSpan[0]);//注意，这里是0，因为当删除第一个，第二个自然就变成了第一个;
			}
			span1.remove();//删除span1元素
		</script>	
	</body>
</html>