- Home ›
- JavaScript入門 ›
- DOM入門
ノードを削除(remove, removeChild)
既に存在しているノードを削除する方法について解説します。 ChildNode オブジェクトの remove メソッド、または Node オブジェクトの removeChild メソッドを使います。どちらのメソッドも同じ目的で使用します。
(Last modified: )
ノードを削除する(remove)
ChildNode オブジェクトの remove メソッドは指定のノードを削除します。書式は次のとおりです。
childnode.remove()
対象のノードを削除します。
※ このメソッドは親ノードではなく削除するノードに対して実行する点に注意してください。
例えば id 属性が xxx のノードを削除する場合は次のように記述します。
let childnode = document.getElementById('xxx'); childnode.remove();
次のサンプルを見てください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ノードを削除</title> </head> <body> <p>今日は外でランチを食べました。</p> <ul id="shopinfo"> <li>リストランテ南青山</li> <li>東京都港区南青山</li> <li>洋食屋</li> </ul> <p>美味しかったです。</p> <button onClick="getElement();">ノードを削除</button> <script> function getElement(){ let parentnode = document.getElementById('shopinfo'); parentnode.lastElementChild.remove(); } </script> </body> </html>
表示されたボタンをクリックすると、 id 属性が shopinfo の要素ノードの子ノードの中で最後の要素ノードを削除します。
ノードを削除する(removeChild)
Node オブジェクトの removeChild メソッドはノードを削除します。書式は次のとおりです。
parentnode.removeChild(childnode)
1 番目の引数に指定した Node オブジェクトを削除します。
例えば id 属性が xxx のノードの子ノードで id 属性が yyy のノードを削除する場合は次のように記述します。
let parentnode = document.getElementById('xxx'); let childnode = document.getElementById('yyy'); parentnode.removeChild(childnode);
次のサンプルを見てください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ノードを削除</title> </head> <body> <p>今日は外でランチを食べました。</p> <ul id="shopinfo"> <li>リストランテ南青山</li> <li>東京都港区南青山</li> <li>洋食屋</li> </ul> <p>美味しかったです。</p> <button onClick="getElement();">ノードを削除</button> <script> function getElement(){ let parentnode = document.getElementById('shopinfo'); parentnode.removeChild(parentnode.lastElementChild); } </script> </body> </html>
表示されたボタンをクリックすると、 id 属性が shopinfo の要素ノードの子ノードの中で最後の要素ノードを削除します。
-- --
既に存在しているノードを削除する方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、開発環境構築などに関する解説サイトを運営しています。