Javascript, parte 10: DOM Agregar y eliminar elementos

En esta publicación vamos a ver cómo podemos agregar nodos nuevos y cómo eliminarlos también.

El ejemplo se verá como esto:

Primero vamos a ingresar el siguiente código HTML:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ejemplo de DOM</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1>Ejemplo de DOM agregar y eliminar elementos</h1>
        <form action="">
            <input type="text" id="input_nombre" class="form-control mb-3" placeholder="Ingresar nombre del ítem" />
            <button type="submit" id="btn_agregar" class="btn btn-primary mb-3"> Agregar </button>
        </form>
        <ul id="ul_lista">
            <!-- Acá van los ítems -->
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
</body>

</html>

En resumen, tendremos algo muy parecido a la publicación pasada:

Un campo para ingresar texto
Un botón
Una lista <ul> en donde al pulsar en dicho botón se agregará un elemento <li> con lo que haya ingresado el usuario

Para eso primero vamos a agregar la referencia a estos tres elementos:

const input_nombre = document.querySelector("#input_nombre");
const btn_agregar = document.querySelector("#btn_agregar");
const ul_lista = document.querySelector("#ul_lista");

preventDefault()

Antes de continuar tenemos que tener en cuenta una cosa, nosotros tenemos un formulario con un botón type submit:

<form action="">
            <input type="text" id="input_nombre" class="form-control mb-3" placeholder="Ingresar nombre del ítem" />
            <button type="submit" id="btn_agregar" class="btn btn-primary mb-3"> Agregar </button>
</form>

Por más que nosotros le agregásemos funcionalidad con Javascript ese formulario se enviará en el momento que el usuario pulse en el botón, recargando la página y perdiendo todo lo que había hasta ese momento.

Por tanto, para eso debemos anular el comportamiento que tiene por defecto ese elemento mediante el método preventDefault():

const agregarItem = (e) => {
    e.preventDefault();
}

btn_agregar.addEventListener("click", agregarItem);

createElement() y appendChild()

El objeto document cuenta en su lista de métodos con createElement, el cual nos permite crear un elemento html de forma dinámica:

let li = document.createElement("li");

Pero para que ese elemento esté disponible dentro de nuestra página tendremos que agregarlo dentro de otro elemento:

ul_lista.appendChild(li);

Es sintesis, que vamos a crear un elemento de tipo <li> y vamos a agregarlo dentro de la lista <ul>, la que definimos con la referencia con el id ul_lista.

Vamos cambiar la función agregarItem por el siguiente código:

const agregarItem = (e) => {
    //Anulamos el envío del formulario
    e.preventDefault();
    //Guardamos lo que ingresó el usuario por teclado.
    let nombre = input_nombre.value;
    //Creamos un elemento de tipo <li>
    let li = document.createElement("li");
    //Le insertamos texto HTML
    li.innerHTML = `
        ${nombre}
        <a href="" class="text text-danger btn_eliminar"> Eliminar </a>
    `;
    //Agregamos el <li> dentro del <ul>
    ul_lista.appendChild(li);
}

removeChild

El proceso para eliminar un elemento de la página es similar a appendChild().

Primero debemos saber cuál es el elemento, y luego desde éste llamar a removeChild():

ul_lista.removeChild(li);

Para ejecutar esto podemos ver que al insertar el código HTML dentro del <li>, había una etiqueta <a>:

li.innerHTML = `
        ${nombre}
        <a href="" class="text text-danger btn_eliminar"> Eliminar </a>
`;

A esa etiqueta <a> tendremos que agregarle el evento click:

//Recuperamos el elemento por su clase, es decir mediante el caracter punto (.)
li.querySelector(".btn_eliminar").addEventListener("click", (e) => {
        //Anulamos el enlace.
        e.preventDefault();
        //Eliminamos el ítem de la lista.
        ul_lista.removeChild(li);
});

Como podemos ver en el ejemplo la etiqueta <a>, no tiene id, por tanto para acceder a la misma podemos hacerlo mediante la etiqueta padre y recuperándola por su nombre de clase:

li.querySelector(".btn_eliminar")

(El punto adelante es para clases)

Otra cosa que hay que tener en cuenta es que la etiqueta <a>, también tiene un comportamiento propio que al hacer click se irá a otra página, en nuestro caso recargará la misma y perderemos todo. Por eso también debemos anular el comportamiento mediante preventDefault()

El código finalmente quedará:

const input_nombre = document.querySelector("#input_nombre");
const btn_agregar = document.querySelector("#btn_agregar");
const ul_lista = document.querySelector("#ul_lista");

const agregarItem = (e) => {
    //Anulamos el envío del formulario
    e.preventDefault();
    //Guardamos lo que ingresó el usuario por teclado.
    let nombre = input_nombre.value;
    //Creamos un elemento de tipo <li>
    let li = document.createElement("li");
    //Le insertamos texto HTML
    li.innerHTML = `
        ${nombre}
        <a href="" class="text text-danger btn_eliminar"> Eliminar </a>
    `;
    //Agregamos el <li> dentro del <ul>
    ul_lista.appendChild(li);

    //Recuperamos el elemento por su clase, es decir mediante el caracter punto (.)
    li.querySelector(".btn_eliminar").addEventListener("click", (e) => {
        //Anulamos el enlace.
        e.preventDefault();
        //Eliminamos el ítem de la lista.
        ul_lista.removeChild(li);
    });

}

btn_agregar.addEventListener("click", agregarItem);