検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >html5 の JavaScript RemoveChild によりすべてのノードが削除される_html5 チュートリアルのヒント

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

WBOY
WBOYオリジナル
2016-05-16 15:47:422468ブラウズ


复制代
代码如下:

< ;!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 デモ: シンプル







  • きれいな行 1

  • きれいな行 2

  • きれいな行 3

  • きれいな行 4

  • きれいな行 5

  • きれいな行 6

  • きれいな行 7

  • きれいな行 8

  • きれいな行 9

  • かなりの行 10

  • きれいな行 40





声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 キャンバス要素の作成サンプル コード_html5 チュートリアルのスキル次の記事：HTML5 キャンバス要素の作成サンプル コード_html5 チュートリアルのスキル

関連記事

続きを見る