 |
Eliminar un nodo de tipo elemento (removeChild) y verificar si tiene nodos hijo (hasChildNodes)
Método removeChild ()
El método removeChild () elimina un nodo hijo especificado del elemento especificado. Devuelve el nodo eliminado como un objeto Nodo 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 .
Consejo: utilice el método appendChild () o insertBefore () para insertar el nodo eliminado en el mismo documento. Para insertarlo en otro documento, use el método document.adoptNode () o document.importNode () .
Sintaxis
var antiguoHijo = elemento.removeChild(child);O
elemento.removeChild(child);
Parámetros
- child es el nodo hijo a eliminar del DOM.
- elemento es el nodo padre de hijo.(ver nota mas abajo)
- antiguoHijo tiene una referencia al hijo eliminado. antiguoHijo === child.
El hijo(child) eliminado aún existe en memoria pero ya no es parte del DOM. Con la primera forma de sintaxis mostrada, se puede reutilizar el nodo eliminado más tarde en el código, por medio de la referencia al objeto antiguoHijo. Sin embargo, en la segunda forma, la referencia a antiguoHijo se pierde, y suponiendo que el código no mantenga una referencia a ese objeto en alguna otra parte, inmediatamente será inutilizable e irrecuperable y será eliminada automáticamente de memoria después de poco tiempo.
Si hijo(child) no es en realidad hijo del nodo elemento, el método lanza una excepción. Esto también sucederá si child es en realidad hijo de elemento al momento de llamar al método, pero fue eliminado por un controlador(manejador) de eventos(event handler) invocado en el curso de tratar de eliminar el elemento. (e.g. blur).
Por lo tanto el método removeChild(child) lanza una excepción de 2 casos diferentes:
- Si child es un hijo del elemento y por lo tanto existe en el DOM, pero se retiró el método lanza la siguiente excepción:
- Si child no existe en el DOM de la página, el método emite la siguiente excepción:
Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
Ejemplo
Elimine el primer elemento
<!DOCTYPE html>
<html>
<body><!-- Note that the <li> elements inside <ul> are not indented (whitespaces).
If they were, the first child node of <ul> would be a text node --><ul id="myList"><li>Cafe</li><li>Te</li><li>Leche</li></ul>
<p>Haga click en el boton para eliminar el primer elemento de la lista..</p>
<button onclick="myFunction()">Try it</button><script>
function myFunction() {
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>
</body>
</html>
Método hasChildNodes()
El método hasChildNodes () devuelve verdadero si el nodo especificado tiene nodos secundarios; de lo contrario, falso.
Nota: Los espacios en blanco dentro de un nodo se consideran nodos de texto, por lo que si deja cualquier espacio en blanco o avance de línea dentro de un elemento, ese elemento todavía tiene nodos secundarios.
<!DOCTYPE html>
<html>
<body>
<ul id="myList">
<li>Cafe</li>
<li>Te</li>
</ul>
<p>Haga click en el botón para ver si el elemento ul tiene nodos secundarios..</p><button onclick="myFunction()">Probar</button>
<p>Intente eliminar los nodos secundarios del elemento de la lista y el resultado será false (falso) en lugar de true (verdadero).</p>
<p><strong>Nota:</strong> Los espacios en blanco dentro de un nodo se consideran nodos de texto,
por lo que si deja cualquier espacio en blanco o avances de línea dentro de un elemento, ese elemento todavía tiene nodos secundarios</p>
<p id="demo"></p>
<script>
function myFunction() {
var list = document.getElementById("myList").hasChildNodes();
document.getElementById("demo").innerHTML = list;
}
</script>
</body>
</html>
Para comprender el funcionamiento de la misma implementaremos un programa que permita añadir y eliminar nodos de texto de un párrafo.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script>
var contador=1;
function agregar()
{
var nt=document.createTextNode('Nuevo texto '+contador+'-');
var nparrafo=document.getElementById('parrafo');
nparrafo.appendChild(nt);
contador++;
}
function eliminar()
{
var nparrafo=document.getElementById('parrafo');
if (nparrafo.hasChildNodes())
{
nparrafo.removeChild(nparrafo.lastChild);
contador--;
}
}</script>
</head>
<body>
<p id="parrafo">Texto inicial:</p>
<input type="button" value="Agregar nodo de texto" onClick="agregar()">
<input type="button" value="Eliminar nodo de texto" onClick="eliminar()">
</body>
</html>
El código javascript es_
var contador=1;
function agregar()
{
var nt=document.createTextNode('Nuevo texto '+contador+'-');
var nparrafo=document.getElementById('parrafo');
nparrafo.appendChild(nt);
contador++;
}
function eliminar()
{
var nparrafo=document.getElementById('parrafo');
if (nparrafo.hasChildNodes())
{
nparrafo.removeChild(nparrafo.lastChild);
contador--;
}
}
La función agregar ya la explicamos en un concepto anterior al ver la función createTextNode.
Para eliminar un nodo de texto primero debemos obtener la referencia de una marca html, en este caso el párrafo:
var nparrafo=document.getElementById('parrafo');
Otro método importante que contiene todo nodo de tipo elemento (son los nodos que apuntan a una marca HTML, en este caso de tipo p (párrafo)) es hasChildNodes, la misma retorna true en caso que el nodo tenga nodos hijos (sean nodos de tipo texto o nodos de tipo elemento).
Es decir que mediante el siguiente if verificamos si el nodo tiene nodos texto aún:
if (nparrafo.hasChildNodes())
{
nparrafo.removeChild(nparrafo.lastChild);
contador--;
}
En caso que la condición se verifique verdadera entrará al bloque del if y se ejecutará la llamada a la función removeChild. La misma requiere una referencia al nodo texto que queremos borrar. Y lo último que aparece es la propiedad lastChild que tiene todo nodo de tipo elemento, el mismo almacena la referencia al último nodo hijo que contiene dicha marca.