如果div裡有這麼些内容：
iScroll demo: simple
function deleteData(){
}
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;
}
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
- Pretty row 5
- Pretty row 6
- Pretty row 7
- Pretty row 8
- Pretty row 9
- Pretty row 10
- Pretty row 40
如今要通過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]);
//
}
}
沒想到，點選了按鈕後。居然僅僅清除掉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]);
//
}
}
試試吧，成功了。還能夠使用以下方法：
function deleteData() {
var el = document.getElementById('thelist');
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
for (var i=0;i
var childNode = el.childNodes[0]; //總是删除第一個，是不是更簡單
el.removeChild(childNode);
}
}
完畢代碼例如以下所看到的：
iScroll demo: simple
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]);
//
}
}
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;
}
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
- Pretty row 5
- Pretty row 6
- Pretty row 7
- Pretty row 8
- Pretty row 9
- Pretty row 10
- Pretty row 40