12 - Eliminar un nodo de texto (removeChild) y verificar si tiene nodos hijo (hasChildNodes)


Para eliminar un nodo de texto disponemos de un método llamada:

removeChild

Para comprender el funcionamiento de la misma implementaremos un programa que permita añadir y eliminar nodos de texto de un párrafo.
pagina.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</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()">
    <script src="funciones.js"></script>
</body>

</html>

funciones.html

let contador = 1

function agregar() {
    let nt = document.createTextNode('Nuevo texto ' + contador + '-')
    let nparrafo = document.getElementById('parrafo')
    nparrafo.appendChild(nt)
    contador++
}

function eliminar() {
    let 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:

    let 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.


Retornar