ノードを削除(remove, removeChild)

広告

既に存在しているノードを削除する方法について解説します。 ChildNode オブジェクトの remove メソッド、または Node オブジェクトの removeChild メソッドを使います。どちらのメソッドも同じ目的で使用します。

ノードを削除する(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 の要素ノードの子ノードの中で最後の要素ノードを削除します。

ノードを削除する(remove)

ノードを削除する(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 の要素ノードの子ノードの中で最後の要素ノードを削除します。

ノードを削除する(removeChild)(1)

-- --

既に存在しているノードを削除する方法について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。