13 - Eliminar un nodo de texto (removeChild) |
Para eliminar un nodo de texto disponemos de una función llamada:
removeChildPara comprender el funcionamiento de la misma implementaremos un programa que permita añadir y eliminar nodos de texto de un párrafo.
<html> <head> <title>Problema</title> <script language="javascript" src="funciones.js" type="text/javascript"></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>funciones.html
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.
var nparrafo=document.getElementById('parrafo');
Otra función 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).
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.