                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

刪除節點removeChild（）章節的一些問題?。?！

<!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(var i=0;i<content.childNodes.length;i++){
??? content.removeChild(content.childNodes[i]);
? }
}
</script>

<button onclick="clearText()">清除節點內容</button>

</body>
</html>

為什么我這么寫，點擊清除節點內容按鈕時，點擊第一遍沒有反應，第二遍減少前面3個li，第三遍減少第四個li，第四遍在減少第五個li，求解釋，我該怎么改可以一下子全部刪除？大神快出來，

guaguaerhao

2016-09-05

源自：JavaScript進階篇 9-14

關注問題我要回答

828

操作

收起

2 回答

楠木樓林3812467 回答被采納 +3 積分
2016-09-18

function?clearText()?{
??var?content=document.getElementById("content");
??//?在此完成該函數
??for(var?i=0;i<content.childNodes.length;i++){
??if(content.childNodes[i].nodeType!=1){
??????continue;
??????}
??else{
????content.removeChild(content.childNodes[i]);
??????}
??}
}

以上可以達到一次清除效果。

在ie下默認是5個子節點，而其他瀏覽器默認是11個子節點

<div?id="content">????文本
??<h1>html</h1>???????文本
??<h1>php</h1>????????文本
??<h1>javascript</h1>?文本
??<h1>jquery</h1>?????文本
??<h1>java</h1>???????文本
</div>

按照你的寫法，第一次調用clearText()刪除的是文本，而每循環一次，length都在減小，所以一次不能清除所有，建議可以看一下置頂答案，那個講解的比較詳細啦。