javascript - 我要清除子节点，为何不能一次清除所有？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 我要清除子节点，为何不能一次清除所有？

天蓬老师 2017-04-10 15:57:19

[JavaScript讨论组]

321

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
</head>

<body>
    <p id="content">
        <h1>html</h1>
        <h1>php</h1>
        <h1>javascript</h1>
        <h1>jquery</h1>
        <h1>java</h1>
    </p>

    <script type="text/javascript">
        function clearText() {
            var content = document.getElementById("content");
            for (i = 0; i <= content.childNodes.length; i++) {
                var child = content.childNodes;
                content.removeChild(child[i]);
            }
        }
    </script>

    <button onclick="clearText()">清除节点内容</button>



</body>

</html>

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(2)

伊谢尔伦2017-04-10 15:59:19 2楼

因为你在清除的过程中，length同时在减少，所以每次清除一个数量也就少一个，自然也就无法清除完毕了

解决的方式有：

简单粗暴地直接把content的innerHTML设置为空
倒着清除：

        function clearText() {
            var content = document.getElementById("content");
            for (i = content.childNodes.length - 1; i >= 0; i--) {
                var child = content.childNodes;
                content.removeChild(child[i]);
            }
        }

PS 给你问题中的HTML排版调整了下，你可以去看下markdown的语法