HTML DOM removeChild[] Method
Element Object
Example
Remove the first
- element with id="myList"
list.removeChild[list.childNodes[0]]; // Remove
- 's first child node [index 0]
Before removing:
- Coffee
- Tea
- Milk
After removing:
- Tea
- Milk
More "Try it Yourself" examples below.
Definition and Usage
The removeChild[] method removes a specified child node of the specified element.
Returns the removed node as a Node object, or null if the node does not exist.
Note: The removed child node is no longer part of the DOM. However, with the reference returned by this method, it is possible to insert the removed child to an element at a later time [See "More Examples"].
Tip: Use the appendChild[] or insertBefore[] method to insert the removed node into the same document. To insert it to another document, use the document.adoptNode[] or document.importNode[] method.
Browser Support
| removeChild[] | Yes | Yes | Yes | Yes | Yes |
Syntax
Parameter Values
| node | Node object | Required. The node object you want to remove |
Technical Details
| A Node object, representing the removed node, or null if the node does not exist |
| Core Level 1 Node Object |
More Examples
Example
Find out if a list has any child nodes. If so, remove its first child node [index 0]:
- element with id="myList"
var list = document.getElementById["myList"];
// If the
- element has any child nodes, remove its first child node
if [list.hasChildNodes[]] {
list.removeChild[list.childNodes[0]];
}
Before removing:
- Coffee
- Tea
- Milk
After removing:
- Tea
- Milk
Example
Remove all child nodes of a list:
- element with id="myList"
var list = document.getElementById["myList"];
// As long as
- has a child node, remove it
while [list.hasChildNodes[]] {
list.removeChild[list.firstChild];
}
Before removing:
- Coffee
- Tea
- Milk
After removing:
Example
Remove a
item.parentNode.removeChild[item];
Before removing:
- Coffee
- Tea
- Milk
After removing:
- Coffee
- Milk
Example
Remove a
function removeLi[] {
item.parentNode.removeChild[item];
}
function appendLi[] {
var list = document.getElementById["myList"];
list.appendChild[item];
}
Example
Remove a element from its parent and insert it to an element in another document:
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];
}
Element Object