コメント:すべてのノードはJavaScriptを介して削除できます。この記事では、主にRemoveChild関数について説明します。次の例を見ることができます
divに何かがあるとします:<!doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> iscrollデモ:Simple </title>
<script type = "text/javascript">
関数deletedata(){
}
</script>
<style type = "text/css" media = "all">
ボディ、ul、li {
パディング:0;
マージン:0;
ボーダー:0;
}
体 {
フォントサイズ:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
フォントファミリー:Helvetica;
}
</style>
</head>
<body>
<div> <入力タイプ= "submit" value = "li node" /> < /div>
<div>
<ul>
<li>かなり行1 </li>
<li>プリティロウ2 </li>
<li>プリティロウ3 </li>
<li>プリティロウ4 </li>
<li>プリティロウ5 </li>
<li>プリティロウ6 </li>
<li>プリティロウ7 </li>
<li>プリティロウ8 </li>
<li>プリティロウ9 </li>
<li>プリティロウ10 </li>
<li>プリティロウ40 </li>
</ul>
</div>
</body>
</html>
これで、JavaScriptの機能を通じてそれらをクリアする必要があります。
ただし、コードの1つの文を介して直接実装できます。
document.getElementById(content).innerhtml =
ただし、この記事では、主にRemoveChild関数について説明しています。
次のコードの助けを借りて行うことができると当然と思いました。
関数deletedata(){
var el = document.getElementById( 'thelist');
var linodes = document.getElementsByTagname( "li");
アラート(linodes.length);
for(var i = 0; i <linodes.length; i ++){
alert( "delete"+i+"linodes [i] ="+linodes [i]);
el.RemoveChild(Linodes [i]);
// <-EL.REMOVECHILD(Linodes [i]);
}
}
予想外に、ボタンをクリックした後、1、3、5のみがクリアされましたが、2、4、6は消えませんでした。
問題は最初から発生しました:
最初のノードを削除した後、後続のノードの順序が変更されました。元の2番目のノードが前進し、新しい最初のノードになります。元の3番目のノードは2番目のノードになります...
そのため、次のステップは2番目のノードを削除することでしたが、最も元の3番目のノードは削除されました。
最終的に、すべてが削除されたわけではなく、1、3、5のみが削除され、2、4、および6が残っていました。
構文にエラーはありませんが、目的の結果は取得されません。これはアルゴリズムのエラーです!それを修正する方法は?
順番に削除する場合は、逆順序で削除します。ステートメントを変更する:
関数deletedata(){
var el = document.getElementById( 'thelist');
var linodes = document.getElementsByTagname( "li");
アラート(linodes.length);
for(var i = linodes.length-1; i> = 0; i-){
alert( "delete"+i+"linodes [i] ="+linodes [i]);
el.RemoveChild(Linodes [i]);
// <-EL.REMOVECHILD(Linodes [i]);
}
}
試してみてください、成功しました!次の方法も使用することもできます。
関数deletedata(){
var el = document.getElementById( 'thelist');
var linodes = document.getElementsByTagname( "li");
アラート(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デモ:Simple </title>
<script type = "text/javascript">
関数initdata(){
var el = document.getElementById( 'thelist');
var linodes = document.getElementsByTagname( "li");
アラート(linodes.length);
for(var i = linodes.length-1; i> = 0; i-){
alert( "delete"+i+"linodes [i] ="+linodes [i]);
el.RemoveChild(Linodes [i]);
// <-EL.REMOVECHILD(Linodes [i]);
}
}
</script>
<style type = "text/css" media = "all">
ボディ、ul、li {
パディング:0;
マージン:0;
ボーダー:0;
}
体 {
フォントサイズ:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
フォントファミリー:Helvetica;
}
</style>
</head>
<body>
<div> <入力タイプ= "submit" value = "li node" /> < /div>
<div>
<ul>
<li>かなり行1 </li>
<li>プリティロウ2 </li>
<li>プリティロウ3 </li>
<li>プリティロウ4 </li>
<li>プリティロウ5 </li>
<li>プリティロウ6 </li>
<li>プリティロウ7 </li>
<li>プリティロウ8 </li>
<li>プリティロウ9 </li>
<li>プリティロウ10 </li>
<li>プリティロウ40 </li>
</ul>
</div>
</body>
</html>