JavaScript HTML DOM removeChild删除子元素

最新推荐文章于 2021-06-16 16:39:49 发布

编程界小明哥

最新推荐文章于 2021-06-16 16:39:49 发布

阅读量2.1k

点赞数 1

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/dkm123456/article/details/111280441

版权

javascript 专栏收录该内容

78 篇文章 27 订阅

订阅专栏

removeChild 方法指定元素的某个指定的子节点，并返回被删除的节点，如果节点不存在则返回 null。

 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <style>
        *{
        	margin:5px;
        	padding:0;
        }
        #box{
        	border:1px solid blue;
        	width:300px;
        	height:200px;
        }
        
        </style>
        </head>
        <body>
        	<div id="box"></div>
        	
        	<button onclick='add()'>添加元素</button>
        	<button onclick='remove()'>从头删除元素</button>
        	<button onclick='removeTail()'>从尾部删除元素</button>
        	<div id="box1" >
        	</div>
        </body>
<script>
	var i=1;
	var box = document.getElementById("box");
	function add(){
		var p = document.createElement("p");
			p.innerText='这是新的P元素'+(i++);
			
			box.appendChild(p);
   }
  function remove(){
  	if(!box.hasChildNodes()) return ;//如果没有子节点则返回
  	box.removeChild(box.firstChild);
  }
  function removeTail(){
  	if(!box.hasChildNodes()) return ;//如果没有子节点则返回
  	box.removeChild(box.lastChild);
  }
</script>
</html>

效果图：

编程界小明哥

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript HTML DOM removeChild删除子元素

removeChild 方法指定元素的某个指定的子节点，并返回被删除的节点，如果节点不存在则返回 null。 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:5px; pa
复制链接

扫一扫