![propansystem[プロパンシステム]](https://propansystem.net/wp-content/themes/sydney/images/header.jpg "propansystem[プロパンシステム]")
ノードの削除について
ノードの削除について試してみます。
削除時の注意としては、削除する命令は親ノードに対して行い、
削除したい子ノードの何番目を削除するのかを指定します。
実際にサンプルを用意して、ノードの削除を試してみます。
[js]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name">
<div id="p2" name="p2name">p2text</div>
<div id="p3" name="p3name">p3text</div>
<div id="p4" name="p3name">p4text</div>
</div>
</div>
<script type="text/javascript">
// Elementノードを取得
let p1 = document.getElementById("p1");
let p2 = document.getElementById("p2");
let p3 = document.getElementById("p3");
let p4 = document.getElementById("p4");
// 取得した親ノード「p1」の子ノード「p3」を削除
p1.removeChild(p3);
</script>
</body>
</html>
[/js]
出力結果は次のようになります。
※…アクセスした画面のHTMLソースを抜粋
[js]
<div id="p1" name="p1name">
<div id="p2" name="p2name">p2text</div>
<div id="p4" name="p3name">p4text</div>
</div>
[/js]
上記のjavascriptを実行した結果、子ノードの
[js]
<div id="p3" name="p3name">p3text</div>
[/js]
が削除されていることがわかります。
また、親ノードから辿って子ノードの指定ができれば削除ができるので、
次のような書き方も可能です。
[js]
p3.parentNode.removeChild(p3);
[/js]
上記の場合は、p3の子ノードから辿り、いったんparentNodeメソッドを使って、p3の親ノードをみて、
その後にremoveChildメソッドを使っています。
少し変則的ですが、下記のような書き方もできます。
[js]
p3.parentNode.removeChild(p2);
[/js]
この場合は、p3の子ノードからparentNodeでp1を参照し、その後に子ノードである「p2」を削除しています。
出力結果は、
[js]
<div id="p1" name="p1name">
<div id="p3" name="p3name">p3text</div>
<div id="p4" name="p3name">p4text</div>
</div>
[/js]
という結果になります。