位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 删除节点

提问人:刘团圆发布时间:2020-11-26

■知识点

removeChild()方法可以从子节点列表中删除某个节点。其用法如下:

    nodeObject.removeChild(node)

其中,参数node为要删除节点。如果删除成功,则返回被删除节点;如果失败,则返回null。

当使用removeChildO方法删除节点时,该节点所包含的所有子节点将同时被删除。

■实例设计

【示例1】在下面的示例中单击按钮时将删除红盒子中的一级标题。

<div id="red">

    <hl>红盒子</hl>

</div>

<div id="blue">蓝盒子</div> 

<button id="ok">移动</button>

<script>

var ok = document.getElementByld("ok");                   //获取按钮元素的引用

ok.onclick = function (){                                                   //为按钮注册一个鼠标单击事件处理函数

    var red = document.getElementByld ("red");           //获取红盒子的引用

    var hi = document.getElementsByTagName("hi")[0];   //获取标题元素的引用 

    red. removeChild (hi) ;                                            //移出红盒子包含的标题元素

}

</script>

【示例2】如果想删除蓝盒子,但是又无法确定它的父元素,此时可以使用parentNode属性来快速获取父元素的引用,并借助这个引用来实现删除操作。

var ok = document. getElementByld ("ok") ;           //获取按钮兀素的引用

ok.onclick = function () {                                           //为按钮注册一个鼠标单击事件处理函数

    var blue = document.getElementByld("blue");     //获取蓝盒子的引用

        var parent = blue .parentNode;                   //获取蓝盒子父元素的引用

    parent. removeChild (blue);                           //移出蓝盒子

}

如果希望把删除节点插入到文档其他位置,可以使用removeChild()方法,也可以使用appendChild() 和insertBefore()方法实现。

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部