ホームページ > 記事 > ウェブフロントエンド > ノードを削除し、子ノードを削除する 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]); }
インデックスが移動したり変化したりしないように、インデックスの最大値から減少する方法で削除を開始します。