位置:电子教程 > HTML DOM 教程 (如果看不到内容请使用360浏览器) 推荐学习资源
HTML DOM 节点
HTML DOM 方法
HTML DOM 属性
HTML DOM 访问
HTML DOM - 修改
HTML DOM - 元素
HTML DOM - 事件
HTML DOM 导航
HTML DOM 总结
当前阅读教程:HTML DOM 教程 > 删除已有的 HTML 元素
阅读(22555525)      收藏       赞(5685)      分享
上一篇: insertBefore()-创建新的 HTML 元素 下一篇: 替换 HTML 元素

如需删除 HTML 元素,您必须清楚该元素的父元素:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建新的 HTML 元素 - insertBefore()(2d5.net小白教程网)</title>
</head>
<body>
 
     <div id="div1">
             <p id="p1">这是段落1。</p>
             <p id="p2">这是段落2。</p>
             <p id="p3">这是段落3。</p>
     </div>
     <script>
             var parent=document.getElementById("div1");
             var child=document.getElementById("p2");
             parent.removeChild(child);
     </script>
    
</body>
</html>

效果图

小白教程网www.2d5.net

image.png

实例解析

这个 HTML 文档小白教程网包含一个带有3个子节点(3 <p> 元素)的 <div> 元素:

<div id="div1">

     <p id="p1">这是段落1</p>

     <p id="p2">这是段落2</p>

     <p id="p3">这是段落3</p>

</div>

查找 id="div1" 的元素:

var parent=document.getElementById("div1");

查找 id="p2" <p> 元素:

var child=document.getElementById("p2");

从父元素中删除子元素:

parent.removeChild(child);

 

能否在不引用父元素的情况下删除某个元素?

很抱歉。DOM 需要了解您需要删除的元素,以及它的父元素。

这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:

var child=document.getElementById("p2");

child.parentNode.removeChild(child);

 


上一篇: insertBefore()-创建新的 HTML 元素 下一篇: 替换 HTML 元素
毕业设计网             广告联系QQ:45157718(微信同号)