ノードを削除し、子ノードを削除する JavaScript のremoveChild() メソッド_JavaScript スキル

次に、JavaScript のremoveChild()を使用してノードを削除する方法を紹介します。具体的な詳細は次のとおりです。

JavaScript では、ノードを削除するメソッドは 1 つだけです:removeChild()。

removeChild() メソッドは、親ノードの子ノードを削除するために使用されます。

文法:

parent.removeChild(thisNode)

パラメータの説明:

参数	说明
thisNode	当前节点，即要删除的节点
parent	当前节点的父节点，即 thisNode.parentNode

たとえば、id="demo" のノードを削除するステートメントは次のとおりです:

var thisNode=document.getElementById("demo");
thisNode.parentNode.removeNode(thisNode);

たとえば、ノードを削除します:

<div id="demo">
  <div id="thisNode">点击删除我</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
  this.parentNode.removeChild(this);
}
</script>

デモの例:

JavaScript にはノードを削除するメソッドが 1 つしか提供されていませんが、それだけで十分であることがわかります。

ps: 子ノードを削除する JavaScript メソッド

HTML コードは次のとおりです:

<div id="f"> 
 <div>a</div> 
 <div>b</div> 
 <div>c</div> 
</div> 

f ノードの下にあるすべての子ノードを削除したい場合、思い浮かぶ自然かつ通常の方法は次のコードです。

var f = document.getElementById("f"); 
var childs = f.childNodes; 
for(var i = 0; i < childs.length; i++) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
} 

プログラムを実行すると、FireFox でも IE でも、すべての子ノードを完全に削除できないことがわかりました (FireFox では空白領域も削除されました
これは、インデックス 0 の子ノードを削除すると、元のインデックス
が自然に削除されるためです。 このとき、1 だったノードのインデックスは 0 になり、このとき変数 i は 1 になります。プログラムが続行すると、元のインデックスが 2 だったノードが削除され、1 になります。ちなみに、プログラムを実行した結果、子ノードの半分についてはノードのみが削除され、for in を使用したトラバースの結果は同じになります。通常通り全ノードを削除したい
その場合は、後ろから前に向かって削除する必要があります。コードは次のとおりです:

for(var i = childs.length - 1; i >= 0; i--) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
} 

インデックスが移動したり変化したりしないように、インデックスの最大値から減少する方法で削除を開始します。