Conceptos de DHTML

Para eliminar un nodo de tipo elemento disponemos del método removeChild, este método lo llamamos a partir del nodo padre.
Veamos un ejemplo que permita eliminar el primer o último nodo elemento:
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>
    <div id="parrafos"></div>
    <input type="button" value="Agregar nodo tipo elemento" onClick="agregar()">
    <input type="button" value="Eliminar primer nodo tipo elemento" onClick="eliminarPrimero()">
    <input type="button" value="Eliminar último nodo tipo elemento" onClick="eliminarUltimo()">
    <script src="funciones.js"></script>
</body>

</html>

funciones.js

let contador = 1

function agregar() {
    let nuevoelemento = document.createElement("p")
    let nuevotexto = document.createTextNode("Hola Mundo " + contador + " - ")
    contador++
    nuevoelemento.appendChild(nuevotexto)
    let puntero = document.getElementById("parrafos")
    puntero.appendChild(nuevoelemento)
}

function eliminarPrimero() {
    let puntero = document.getElementById("parrafos")
    if (puntero.children.length > 0)
        puntero.removeChild(puntero.children[0])
}

function eliminarUltimo() {
    let puntero = document.getElementById("parrafos")
    if (puntero.children.length > 0)
        puntero.removeChild(puntero.children[puntero.children.length - 1])
}

La primera función nos permite crear un nodo de tipo elemento y añadirlo a otro nodo elemento de la página:

function agregar() {
    let nuevoelemento = document.createElement("p")
    let nuevotexto = document.createTextNode("Hola Mundo " + contador + " - ")
    contador++
    nuevoelemento.appendChild(nuevotexto)
    let puntero = document.getElementById("parrafos")
    puntero.appendChild(nuevoelemento)
}

Lo nuevo se encuentra en la función de eliminarPrimero:

function eliminarPrimero() {
    let puntero = document.getElementById("parrafos")
    if (puntero.children.length > 0)
        puntero.removeChild(puntero.children[0])
}

Obtenemos una referencia al nodo elemento llamado "parrafos", si este nodo tiene nodos hijos procedemos a llamar al método removeChild y le pasamos como parámetro la referencia a su primer hijo (puntero.children[0]).

Este control lo hacemos para validar que el nodo tenga nodos hijo.
Para eliminar el último nodo:

function eliminarUltimo() {
    let puntero = document.getElementById("parrafos")
    if (puntero.children.length > 0)
        puntero.removeChild(puntero.children[puntero.children.length - 1])
}

Enviamos como parámetro al método removeChild la referencia del último hijo al que accedemos por medio del vector children.

15 - Eliminar un nodo de tipo elemento (removeChild)

Retornar