DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> html5中JavaScript removeChild 刪除所有節點
html5中JavaScript removeChild 刪除所有節點
編輯:HTML5詳解     
假設div裡有這麼些內容: 

復制代碼代碼如下:
<!DOCTYPE Html> 
<Html> 
<head> 
<meta http-equiv="Content-Type" content="text/Html;charset=GBK"> 
<title>iScroll demo: simple</title> 
<script type="text/Javascript"> 
function deleteData(){ 

</script> 
<style type="text/CSS" media="all"> 
body,ul,li { 
padding:0; 
margin:0; 
border:0; 

body { 
font-size:12px; 
-webkit-user-select:none; 
-webkit-text-size-adjust:none; 
font-family:helvetica; 

</style> 
</head> 
<body> 
<div ><input type="submit" name="button" id="button" value="刪除li節點" class="button gray" onclick="deleteData()" /> </div> 
<div > 
<ul id="thelist"> 
<li>Pretty row 1</li> 
<li>Pretty row 2</li> 
<li>Pretty row 3</li> 
<li>Pretty row 4</li> 
<li>Pretty row 5</li> 
<li>Pretty row 6</li> 
<li>Pretty row 7</li> 
<li>Pretty row 8</li> 
<li>Pretty row 9</li> 
<li>Pretty row 10</li> 
<li>Pretty row 40</li> 
</ul> 
</div> 
</body> 
</Html> 

現在要通過JavaScript的功能,將它們清空。 

雖然可以通過一句代碼直接實現: 

document.getElementById("content").innerHtml="" 

但是本文裡主要討論 removeChild 函數。 

很想當然地以為借助下面的代碼就能完成: 

復制代碼代碼如下:
function deleteData(){ 
var el = document.getElementById('thelist'); 
var liNodes = document.getElementsByTagName("li"); 
alert(liNodes.length); 
for(var i = 0; i < liNodes.length; i++){ 
alert("刪除"+i+" liNodes[i]="+ liNodes[i]); 
el.removeChild(liNodes[i]); 
//<-- el.removeChild(liNodes[i]); 



沒想到,點擊了按鈕後,竟然只清除掉1、3、5...,而2、4、6....竟然沒有消失, 

問題從一開始就產生了: 

刪除掉第一個節點後,後面節點的順序全部發生了變化:原來的第二個節點往前蹭,成為新的第一個節點;原來的第三個節點,成為第二個節點…… 

於是呢,接下來原本是要刪除第二個節點的,卻將最原始的第三個節點給刪除掉了。 

最終,並沒有全部刪除,只刪除掉1、3、5,留下了2、4、6。 

語法沒有錯誤,但是得不到所要的結果,這就是算法上面的錯誤!該如何修正呢? 

“順序刪除”不行,那就“逆序刪除”吧。將 for 語句修改一下: 

復制代碼代碼如下:
function deleteData(){ 
var el = document.getElementById('thelist'); 
var liNodes = document.getElementsByTagName("li"); 
alert(liNodes.length); 
for(var i = liNodes.length-1; i >=0; i--){ 
alert("刪除"+i+" liNodes[i]="+ liNodes[i]); 
el.removeChild(liNodes[i]); 
//<-- el.removeChild(liNodes[i]); 



試試吧,成功了!還可以使用下面方法: 

復制代碼代碼如下:
function deleteData() { 
var el = document.getElementById('thelist'); 
var liNodes = document.getElementsByTagName("li"); 
alert(liNodes.length); 
for (var i=0;i<el.childNodes.length;i++){ 
var childNode = el.childNodes[0]; //總是刪除第一個,是不是更簡單 
el.removeChild(childNode); 



完成代碼如下所示: 

復制代碼代碼如下:
<!DOCTYPE Html> 
<Html> 
<head> 
<meta http-equiv="Content-Type" content="text/Html;charset=GBK"> 
<title>iScroll demo: simple</title> 
<script type="text/Javascript"> 
function initData(){ 
var el = document.getElementById('thelist'); 
var liNodes = document.getElementsByTagName("li"); 
alert(liNodes.length); 
for(var i = liNodes.length-1; i >=0; i--){ 
alert("刪除"+i+" liNodes[i]="+ liNodes[i]); 
el.removeChild(liNodes[i]); 
//<-- el.removeChild(liNodes[i]); 


</script> 
<style type="text/CSS" media="all"> 
body,ul,li { 
padding:0; 
margin:0; 
border:0; 

body { 
font-size:12px; 
-webkit-user-select:none; 
-webkit-text-size-adjust:none; 
font-family:helvetica; 

</style> 
</head> 
<body> 
<div ><input type="submit" name="button" id="button" value="刪除li節點" class="button gray" onclick="initData()" /> </div> 
<div > 
<ul id="thelist"> 
<li>Pretty row 1</li> 
<li>Pretty row 2</li> 
<li>Pretty row 3</li> 
<li>Pretty row 4</li> 
<li>Pretty row 5</li> 
<li>Pretty row 6</li> 
<li>Pretty row 7</li> 
<li>Pretty row 8</li> 
<li>Pretty row 9</li> 
<li>Pretty row 10</li> 
<li>Pretty row 40</li> 
</ul> 
</div> 
</body> 
</Html> 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved