当前第2页 返回上一页
说明：
removeChild() 方法可以从子节点列表中删除某个节点。用法如下：
1 | nodeObject.removeChild(node)
|
其中参数 node 为要删除节点。如果删除成功，则返回被删除节点；如果失败，则返回 null。
当使用 removeChild() 方法删除节点时，该节点所包含的所有子节点将同时被删除。
示例1
在下面的示例中单击按钮时将删除红盒子中的一级标题。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="red">
<h1>红盒子</h1>
</div>
<div id="blue">蓝盒子</div>
<button id="ok">移动</button>
<script>
var ok = document.getElementById ("ok"); //获取按钮元素的引用
ok.onclick = function () { //为按钮注册一个鼠标单击事件处理函数
var red = document.getElementById ("red"); //获取红色盒子的引用
var h1 = document.getElementsByTagName("h1")[0]; //获取标题元素的引用
red.removeChild(h1); //移出红盒子包含的标题元素
}
</script>
|
示例2
如果想删除蓝色盒子，但是又无法确定它的父元素，此时可以使用 parentNode 属性来快速获取父元素的引用，并借助这个引用来实现删除操作。
1 2 3 4 5 6 | var ok = document.getElementById ("ok");
ok.onclick = function () {
var blue= document.getElementById ("blue");
var parent = blue.parentNode;
parent.removeChild(blue);
}
|
如果希望把删除节点插入到文档其他位置，可以使用 removeChild() 方法，也可以使用 appendChild() 和 insertBefore() 方法来实现。
示例3
在 DOM 文档操作中删除节点与创建和插入节点一样都是使用最频繁的，为此可以封装删除节点操作函数。
1 2 3 4 5 6 7 8 9 10 | function remove (e) {
if (e) {
var _e = e.parentNode.removeChild(e);
return _e;
}
return undefined;
}
|
示例4
如果要删除指定节点下的所有子节点，则封装的方法如下：
1 2 3 4 5 6 7 | function empty (e) {
while (e.firstChild) {
e.removeChild (e.firstChild);
}
}
|
【推荐学习：javascript高级教程】
以上就是javascript怎么删除子元素的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
详解css3+svg滤镜实现不规则边框的方法
javascript怎么移除dom元素
javascript怎么给css加样式
js || &&详解
javascript怎么设置不可编辑
五个超好用的array.from()用途（详解）
jquery+jsonp跨域需要怎样实现
javascript的技术特性是什么
页面性能优化的方法总结
javascript如何改变原数组
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » javascript怎么删除子元素
