ノードの削除について
ノードの削除について試してみます。
削除時の注意としては、削除する命令は親ノードに対して行い、
削除したい子ノードの何番目を削除するのかを指定します。
実際にサンプルを用意して、ノードの削除を試してみます。
<!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>
出力結果は次のようになります。
※…アクセスした画面のHTMLソースを抜粋
<div id="p1" name="p1name"> <div id="p2" name="p2name">p2text</div> <div id="p4" name="p3name">p4text</div> </div>
上記のjavascriptを実行した結果、子ノードの
<div id="p3" name="p3name">p3text</div>
が削除されていることがわかります。
また、親ノードから辿って子ノードの指定ができれば削除ができるので、
次のような書き方も可能です。
p3.parentNode.removeChild(p3);
上記の場合は、p3の子ノードから辿り、いったんparentNodeメソッドを使って、p3の親ノードをみて、
その後にremoveChildメソッドを使っています。
少し変則的ですが、下記のような書き方もできます。
p3.parentNode.removeChild(p2);
この場合は、p3の子ノードからparentNodeでp1を参照し、その後に子ノードである「p2」を削除しています。
出力結果は、
<div id="p1" name="p1name"> <div id="p3" name="p3name">p3text</div> <div id="p4" name="p3name">p4text</div> </div>
という結果になります。