• 技术文章 >web前端 >js教程

    javascript怎么删除子元素

    青灯夜游青灯夜游2021-07-20 17:17:44原创94

    在javascript中,可以使用removeChild()方法来删除子元素,该方法可以从指定元素的子节点列表中删除某个节点,即删除指定子元素;语法格式“父元素对象.removeChild(子元素)”。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    javascript删除子元素

    在javascript中,可以使用removeChild()方法来删除子元素。下面通过示例来具体了解一下。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			div{
    				border: 2px dashed #006DAF;
    				padding: 10px;
    			}
    			p{
    				border: 2px dashed #006DAF;
    				padding: 10px;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div>div元素
    			<h2>一个标题</h2>
    			<p>一个段落</p>
    		</div><br />
    		<input id="btn" type="button" value="删除div中的子元素p">
    	</body>
    	<script>
    		function deleteChild() {
    			var div = document.querySelector("div");
    			var p = document.querySelector("p");
    
    			div.removeChild(p);
    
    		}
    		var btn = document.getElementById("btn").onclick = function() {
    			deleteChild();
    		}
    	</script>
    
    </html>

    效果图:

    1.gif

    说明:

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

    nodeObject.removeChild(node)

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

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

    示例1

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

    <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 属性来快速获取父元素的引用,并借助这个引用来实现删除操作。

    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 文档操作中删除节点与创建和插入节点一样都是使用最频繁的,为此可以封装删除节点操作函数。

    //封装删除节点函数
    //参数:e表示预删除的节点
    //返回值:返回被删除的节点,如果不存在指定的节点,则返回undefined值
    function remove (e) {
        if (e) {
            var _e = e.parentNode.removeChild(e);
            return _e;
        }
        return undefined;
    }

    示例4

    如果要删除指定节点下的所有子节点,则封装的方法如下:

    //封装删除所有子节点的方法
    //参数:e表示预删除所有子节点的父节点
    function empty (e) {
        while (e.firstChild) {
            e.removeChild (e.firstChild);
        }
    }

    【推荐学习:javascript高级教程

    以上就是javascript怎么删除子元素的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript 子元素
    上一篇:JavaScript中怎么改字体颜色 下一篇:javascript some()方法怎么用
    VIP会员

    相关文章推荐

    • javascript怎么定义动态变量• Javascript如何使网页跳转• javascript的不等于是啥符号• javascript怎么设置背景颜色• javascript怎么将值转换成数字类型• JavaScript怎么定义对象数组

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网