html5 の JavaScript RemoveChild によりすべてのノードが削除される_html5 チュートリアルのヒント-H5 チュートリアル-php.cn

html5 の JavaScript RemoveChild によりすべてのノードが削除される_html5 チュートリアルのヒント

WBOY

リリース： 2016-05-16 15:47:42

オリジナル

2461 人が閲覧しました

复制代

代码如下:

< ;!DOCTYPE html>

iScroll デモ: シンプル

きれいな行 1

きれいな行 2

きれいな行 3

きれいな行 4

きれいな行 5

きれいな行 6

きれいな行 7

きれいな行 8

きれいな行 9

かなりの行 10

きれいな行 40

は、JavaScript を介して実行される機能で、それらをクリアします。

は、一代句コードを介して直接実行できます。 =""

ただし、ここでは、removeChild 関数を主に説明します。

は、当然ながら、次の面を介して代用コードを実行することができます:

复制代記入代記入例:

function deleteData(){

var el = document.getElementById('thelist');
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
for(var i = 0; i alert("删除" i " liNodes[i]=" liNodes[i]);
el.removeChild(liNodes[i]);
//}
}

否想，点击了按钮後，竟然只清除掉1、3、5...，而2、4、6....竟然無し消失、

问题从一開始就生産了：

删除掉第一节点後，後面节点の顺序全部発行了变化：原来の第二节点往前蹭，成新しい最初のノード；元の 3 番目のノード、2 番目のノードになる……

以降、次のオリジナルは 2 番目のノードを削除する必要があり、最初の 3 番目のノードが廃止されます

は最終的に、すべての削除はなく、1、3、5 だけが削除され、2、4、6 が残されています。望ましい結果に到達するには、これは算法上の問題です。これはどのように修正されますか?

「順順除」は実行されず、そのまま「逆順除」になります。 🎜>

复制代码

代码如下:

function deleteData(){ var el = document.getElementById('リスト'); 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;ivar childNode = el.childNodes[0]; //总是删除第一个，是不是更简单

el.removeChild(childNode);
}
}

完了代码如下示:

复制代

代码如下:

iScroll デモ: シンプル