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

<!DOCTYPE HTML>
<html>

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

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

    <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>

如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

document.getElementById("content").empty()

因为你在清除的过程中，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的语法

【热门文章】