HTML DOM removeChild（）メソッド
例
リストから最初の<li>要素を削除します。
var list = document.getElementById("myList"); // Get the <ul> element with id="myList"
list.removeChild(list.childNodes[0]); // Remove <ul>'s first child node (index 0)
削除する前に：
- コーヒー
- お茶
- 牛乳
削除後：
- お茶
- 牛乳
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
removeChild（）メソッドは、指定された要素の指定された子ノードを削除します。
削除されたノードをNodeオブジェクトとして返します。ノードが存在しない場合はnullを返します。
注：削除された子ノードは、DOMの一部ではなくなりました。ただし、このメソッドによって返される参照を使用すると、削除された子を後で要素に挿入することができます（「その他の例」を参照）。
ヒント：appendChild（）または insertBefore（）メソッドを使用して、削除されたノードを同じドキュメントに挿入します。別のドキュメントに挿入するには、document.adoptNode（）または document.importNode（）メソッドを使用します。
ブラウザのサポート
| Method | |||||
|---|---|---|---|---|---|
| removeChild() | Yes | Yes | Yes | Yes | Yes |
構文
node.removeChild(node)
パラメータ値
| Parameter | Type | Description |
|---|---|---|
| node | Node object | Required. The node object you want to remove |
技術的な詳細
| 戻り値： | 削除されたノードを表すNodeオブジェクト、またはノードが存在しない場合はnull |
|---|---|
| DOMバージョン | コアレベル1ノードオブジェクト |
その他の例
例
リストに子ノードがあるかどうかを調べます。その場合、最初の子ノード（インデックス0）を削除します。
// Get the <ul> element with id="myList"
var list = document.getElementById("myList");
// If the <ul> element has any child nodes, remove its first child node
if (list.hasChildNodes()) {
list.removeChild(list.childNodes[0]);
}
削除する前に：
- Coffee
- Tea
- Milk
削除後：
- Tea
- Milk
例
リストのすべての子ノードを削除します。
// Get the <ul> element with id="myList"
var list = document.getElementById("myList");
// As long as <ul> has a child node, remove it
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
削除する前に：
- Coffee
- Tea
- Milk
削除後：
例
親要素からid = "myLI"の<li>要素を削除します（親ノードを指定せずに）。
var item = document.getElementById("myLI");
item.parentNode.removeChild(item);
削除する前に：
- Coffee
- Tea
- Milk
削除後：
- Coffee
- Milk
例
親から<li>要素を削除し、再度挿入します。
var item = document.getElementById("myLI");
function removeLi() {
item.parentNode.removeChild(item);
}
function appendLi() {
var list = document.getElementById("myList");
list.appendChild(item);
}
例
親から<span>要素を削除し、別のドキュメントの<h1>要素に挿入します。
var child = document.getElementById("mySpan");
function removeLi() {
child.parentNode.removeChild(child);
}
function myFunction() {
var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.adoptNode(child);
h.appendChild(x);
}