HTML DOM Element removeChild() メソッド
- 前のページ removeAttributeNode()
- 次のページ removeEventListener()
- 上一階層に戻る HTML DOM Elements オブジェクト
定義と使用方法
removeChild() メソッドは要素の子ノードを削除します。
このメソッドは、削除されたノードを Node オブジェクトで返します；ノードが存在しない場合、返します null。
ヒント
子ノードは、ドキュメントオブジェクトモデル（DOM）から削除されます。
ただし、返されたノードを修正して DOM に再び挿入することができます（以下の例を参照）。
参照：
例
例 1
リストから最初の要素を削除します：
const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);
削除前：
- コーヒー
- ティー
- ミルク
削除後：
- ティー
- ミルク
例 2
リストに子ノードがある場合、最初のもの（インデックス 0）を削除します：
const list = document.getElementById("myList");
if (list.hasChildNodes()) {
list.removeChild(list.children[0]);
}
例 3
リストからすべての子ノードを削除します：
const list = document.getElementById("myList");
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
例 4
その親ノードから要素を削除します：
element.parentNode.removeChild(element);
例 5
その親要素から要素を削除して再び挿入します：
const element = document.getElementById("myLI");
function removeLi() {
element.parentNode.removeChild(element);
}
function appendLi() {
const list = document.getElementById("myList");
list.appendChild(element);
}
例 6：ポップアップ
削除されたノードを同じドキュメントに挿入する場合は、appendChild() または insertBefore() を使用してください。
document.adoptNode() または document.importNode() を使用して、別のドキュメントに挿入できます。
以下の例では、要素を親要素から削除し、別のドキュメントに挿入します：
const child = document.getElementById("mySpan");
function remove() {
child.parentNode.removeChild(child);
}
function insert() {
const frame = document.getElementsByTagName("IFRAME")[0]
const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
const x = document.adoptNode(child);
h.appendChild(x);
}
文法
element.removeChild(node)
または
node.removeChild(node)
パラメータ
| パラメータ | 説明 |
|---|---|
| node | 必要。削除するノード（要素） |
返り値
| タイプ | 説明 |
|---|---|
| Node |
削除されたノード（要素） 子ノードが存在しない場合、null になります。 |
ブラウザのサポート
element.removeChild() DOM レベル 1 (1998) の機能です。
すべてのブラウザが完全にサポートしています：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| サポート | 9-11 | サポート | サポート | サポート | サポート |
- 前のページ removeAttributeNode()
- 次のページ removeEventListener()
- 上一階層に戻る HTML DOM Elements オブジェクト
