html5中JavaScript removeChild 刪除所有節(jié)點(diǎn)

2020-03-24 18:19:50

字體：大中小

供稿：網(wǎng)友

假設(shè)div里有這么些內(nèi)容：

復(fù)制代碼代碼如下:
!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節(jié)點(diǎn)" / /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

現(xiàn)在要通過(guò)JavaScript的功能，將它們清空。

雖然可以通過(guò)一句代碼直接實(shí)現(xiàn)：

document.getElementById( content ).innerHTML=

但是本文里主要討論 removeChild 函數(shù)。

很想當(dāng)然地以為借助下面的代碼就能完成：

復(fù)制代碼代碼如下:
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]);
}
}

沒(méi)想到，點(diǎn)擊了按鈕后，竟然只清除掉1、3、5...，而2、4、6....竟然沒(méi)有消失，

問(wèn)題從一開(kāi)始就產(chǎn)生了：

刪除掉第一個(gè)節(jié)點(diǎn)后，后面節(jié)點(diǎn)的順序全部發(fā)生了變化：原來(lái)的第二個(gè)節(jié)點(diǎn)往前蹭，成為新的第一個(gè)節(jié)點(diǎn)；原來(lái)的第三個(gè)節(jié)點(diǎn)，成為第二個(gè)節(jié)點(diǎn)

于是呢，接下來(lái)原本是要?jiǎng)h除第二個(gè)節(jié)點(diǎn)的，卻將最原始的第三個(gè)節(jié)點(diǎn)給刪除掉了。

最終，并沒(méi)有全部刪除，只刪除掉1、3、5，留下了2、4、6。

語(yǔ)法沒(méi)有錯(cuò)誤，但是得不到所要的結(jié)果，這就是算法上面的錯(cuò)誤！該如何修正呢？

順序刪除不行，那就逆序刪除吧。將 for 語(yǔ)句修改一下：

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

試試吧，成功了！還可以使用下面方法：

復(fù)制代碼代碼如下:
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]; //總是刪除第一個(gè)，是不是更簡(jiǎn)單
el.removeChild(childNode);
}
}

完成代碼如下所示：

復(fù)制代碼代碼如下:
!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 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節(jié)點(diǎn)" / /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
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html怎么引入js

下一篇：網(wǎng)頁(yè)中的圖片查看器viewjs使用