Método HTML DOM removeChild()
Ejemplo
Elimina el primer elemento <li> de una lista:
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)
Antes de quitar:
- Café
- Té
- Leche
Después de eliminar:
- Té
- Leche
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El método removeChild() elimina un nodo secundario especificado del elemento especificado.
Devuelve el nodo eliminado como un objeto Node o nulo si el nodo no existe.
Nota: El nodo secundario eliminado ya no forma parte del DOM. Sin embargo, con la referencia devuelta por este método, es posible insertar el elemento secundario eliminado en un elemento en un momento posterior (consulte "Más ejemplos").
Sugerencia: use el método appendChild() o insertBefore() para insertar el nodo eliminado en el mismo documento. Para insertarlo en otro documento, utilice el método document.adoptNode() o document.importNode() .
Compatibilidad con navegador
Method | |||||
---|---|---|---|---|---|
removeChild() | Yes | Yes | Yes | Yes | Yes |
Sintaxis
node.removeChild(node)
Valores paramétricos
Parameter | Type | Description |
---|---|---|
node | Node object | Required. The node object you want to remove |
Detalles técnicos
Valor de retorno: | Un objeto Node, que representa el nodo eliminado, o nulo si el nodo no existe |
---|---|
Versión DOM | Objeto de nodo de nivel básico 1 |
Más ejemplos
Ejemplo
Averigüe si una lista tiene nodos secundarios. Si es así, elimine su primer nodo secundario (índice 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]);
}
Antes de quitar:
- Coffee
- Tea
- Milk
Después de eliminar:
- Tea
- Milk
Ejemplo
Eliminar todos los nodos secundarios de una lista:
// 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);
}
Antes de quitar:
- Coffee
- Tea
- Milk
Después de eliminar:
Ejemplo
Eliminar un elemento <li> con id="myLI" de su elemento principal (sin especificar su nodo principal):
var item = document.getElementById("myLI");
item.parentNode.removeChild(item);
Antes de quitar:
- Coffee
- Tea
- Milk
Después de eliminar:
- Coffee
- Milk
Ejemplo
Elimine un elemento <li> de su padre e insértelo de nuevo:
var item = document.getElementById("myLI");
function removeLi() {
item.parentNode.removeChild(item);
}
function appendLi() {
var list = document.getElementById("myList");
list.appendChild(item);
}
Ejemplo
Elimine un elemento <span> de su padre e insértelo en un elemento <h1> en otro documento:
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);
}