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

    javascript中节点怎么删除

    青灯夜游青灯夜游2021-04-01 15:24:23原创1937

    javascript删除节点的方法:1、使用remove()方法,可用于删除父节点上的所有元素,包括所有文本和子节点;2、使用removeChild()方法,可用于删除父节点上的一个子节点。

    本教程操作环境:windows7系统、ECMAScript 5版、Dell G3电脑。

    在JavaScript中,可以使用removeChild()或remove()方法来删除节点。

    1、使用使用removeChild()删除节点

    removeChild() 方法删除指定元素的某个指定的子节点。以 Node 对象返回被删除的节点,如果节点不存在则返回 null。

    语法

    node.removeChild(node)

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    </head>
    <body>
    
    <ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
    <p id="demo">单击按钮移除列表的第一项</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction(){
    	var list=document.getElementById("myList");
    	list.removeChild(list.childNodes[0]);
    }
    </script>
    
    </body>
    </html>

    效果图:

    2.gif

    【推荐学习:js基础教程

    2、使用remove()方法删除节点

    remove()方法可用于删除父节点上的所有元素,包括所有文本和子节点。

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    </head> 
      
    <body> 
        <ul style="border: 2px dashed #006DAF;"> 
            <li>Get Up in Morning</li> 
            <li>Do some exercise</li> 
            <li>Get Ready for school</li> 
            <li>Study Daily</li> 
            <li>Do homework</li> 
        </ul> 
        <input id="btn" type="button" value="删除子节点"> 
    </body> 
    <script> 
        function deleteChild() { 
            var e = document.querySelector("ul"); 
            var first = e.firstElementChild; 
            while (first) { 
                first.remove(); 
                first = e.firstElementChild; 
            } 
        } 
        var btn = document.getElementById("btn").onclick = function() { 
            deleteChild(); 
        } 
    </script> 
      
    </html>

    效果图:

    1.gif

    更多编程相关知识,请访问:编程视频!!

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 节点
    上一篇:javascript怎么求阶乘 下一篇:javascript的exec方法怎么用
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• javascript中的转义字符有哪些• javascript怎么类型转换• javascript数组中怎么删除元素• javascript用什么软件编写• javascript怎么将对象转成字符串
    1/1

    PHP中文网