Eliminar filas con splice y map en JS

Clase 21 de 23 • Curso de Programación Funcional en JavaScript por Bedu

Contenido del curso

Introducción al curso y conceptos base

Funciones

Estado compartido en funciones

Composición de funciones, Closures y Currying

Higher Order Functions

Bonus: Declarative Programming

22
Programación Declarativa
06:29 min

Conclusiones

23
Conclusiones
01:30 min

Tomar examen

Resumen

Lograr que una tabla dinámica permita agregar y eliminar elementos es uno de los pasos más satisfactorios al construir una aplicación web. Con las funciones de generación de etiquetas que ya se construyeron en clases anteriores, ahora es momento de crear el botón de eliminar, conectarlo a cada fila y actualizar los totales automáticamente.

¿Cómo se estructura el botón de eliminar en HTML?

Dentro del <tbody>, cada fila ya mostraba cuatro celdas: descripción, calorías, carbohidratos y proteínas. Para incorporar la acción de eliminar, se necesita una celda adicional que contenga un botón. La estructura que se busca generar es la siguiente [1:00]:

Un elemento <button> con las clases button y button-outline-danger, ambas proporcionadas por Bootstrap.
Un atributo onClick que ejecute la función removeItem pasándole el index del elemento.
Dentro del botón, una etiqueta <i> con las clases fas y fa-trash-alt para mostrar el ícono de basura.

Estas clases ya están disponibles en el boilerplate del proyecto, así que no hace falta escribir CSS adicional.

¿Cómo generar el ícono y el botón con JavaScript?

Primero se crea una constante llamada trashIcon utilizando la función tag, a la que se le pasa un objeto con la propiedad tag: "i" y dentro de attributes la clase fas fa-trash-alt [2:34]. Es importante recordar que el segundo argumento de la función tag debe ser un string vacío cuando la etiqueta no tiene contenido interno.

javascript const trashIcon = tag({ tag: 'i', attributes: { class: 'fas fa-trash-alt' } }, '');

Después, dentro de la función renderItems, se genera el botón de forma dinámica. El método map de JavaScript puede recibir un segundo argumento además del elemento actual: el index [3:22]. Este índice indica la posición dentro del arreglo y permite saber exactamente qué fila eliminar.

javascript const removeButton = tag({ tag: 'button', attributes: { class: 'button button-outline-danger', onClick: removeItem(${index}) } }, trashIcon);

Finalmente, se agrega removeButton como la quinta celda dentro de la fila, componiendo funciones tal como se venía haciendo con las celdas anteriores.

¿Qué errores comunes pueden aparecer?

Al probar por primera vez, es posible que el resultado no sea el esperado. Dos errores frecuentes que surgieron durante la práctica [4:25]:

Olvidar el segundo argumento de la función tag: cuando una etiqueta no tiene contenido, se debe pasar un string vacío.
Comillas modificadas por el editor: algunos editores reemplazan comillas dobles estándar por comillas tipográficas, lo que rompe el código.

Corregir estos detalles es suficiente para que el botón con el ícono de basura se renderice correctamente.

¿Cómo funciona la lógica de eliminación con splice?

La función removeItem recibe el index como argumento y utiliza el método splice de JavaScript [5:30]. Este método modifica el arreglo original eliminando elementos a partir de una posición específica.

javascript const removeItem = (index) => { items.splice(index, 1); updateTotals(); renderItems(); };

splice(index, 1) elimina un solo elemento en la posición indicada.
Después de eliminar, se llama a updateTotals para recalcular calorías, carbohidratos y proteínas.
Se ejecuta renderItems para volver a dibujar la lista actualizada en pantalla.

¿Por qué es importante el index en el método map?

Hasta este punto solo se había utilizado el primer argumento de map, que representa el elemento actual del ciclo. Al incorporar el segundo argumento, el index, se obtiene la posición exacta de cada elemento dentro del arreglo [3:22]. Esto resulta esencial para conectar cada botón de eliminar con su fila correspondiente, haciendo que la interacción sea precisa.

Con estas adiciones, el proyecto ya permite agregar elementos, eliminarlos y actualizar los totales de forma automática. Si notaste algún detalle adicional o tienes dudas sobre el uso de splice o map, compártelo en los comentarios.

Jorge Méndez Ortega

student•

Practica general del curso sin utilizar jQuery 🤢, para este caso solo se utilizo JS puro lo cual también se conoce como vanilla.

const compose = (...functions) => data => functions.reduceRight((value, func) => func(value), data);

// Se utiliza $ para identificar que una variable o constante hace referencia
// a elementos del DOM
const $DESCRIPTION = document.getElementById("description");
const $CALORIAS = document.getElementById("calorias");
const $CARBOIDRATOS = document.getElementById("carboidratos");
const $PROTEINAS = document.getElementById("proteinas");
const ERROR_CLASS = "is-invalid";
const SUCCESS_CLASS = "is-valid";

// Arreglo de elementos
let LIST = [];

// consiguiendo los atributes para las etiquetas HTML
const attributesToString = (obj = {}) => {
    const ENTRIES = Object.entries(obj);
    const ATTRS = [];
    for (let i = 0; i < ENTRIES.length; i += 1) {
        const AUX = ENTRIES[i];
        const ATTR = AUX[0];
        const VALUE = AUX[1];
        ATTRS.push(`${ATTR}="${VALUE}"`);
    }
    return ATTRS.join("");
};

// Creando etiquetas html con atributos
const createTagAttr = obj => (content = "") => {
    const { tag, attr } = obj;
    return `
      <${tag}${attr ? ` ${attributesToString(attr)}` : ""}>
        ${content}
      </${tag}>`;
};

// Generando tag de maner dinamica
const createTag = (tag) => {
    const TAG = (typeof tag === "string")
        ? createTagAttr({ tag })
        : createTagAttr(tag);
    return TAG;
};

const trashIcon = createTag({ tag: "i", attr: { class: "fas fa-trash-alt" } })("");
const tableCell = createTag("td");
const tableCells = items => items.map(tableCell).join("");

const tableRowTag = createTag("tr");
const tableRow = items => compose(tableRowTag, tableCells)(items);


// Asignacion de evntos siempre que se desea asignar un evento aun elemento del DOM
// es necesario utilizar addEventListener
$DESCRIPTION.addEventListener("keypress", () => $DESCRIPTION.classList.remove(ERROR_CLASS));
$CALORIAS.addEventListener("keypress", () => $CALORIAS.classList.remove(ERROR_CLASS));
$CARBOIDRATOS.addEventListener("keypress", () => $CARBOIDRATOS.classList.remove(ERROR_CLASS));
$PROTEINAS.addEventListener("keypress", () => $PROTEINAS.classList.remove(ERROR_CLASS));

// Limpiando inputs
const cleanInputs = () => {
    $DESCRIPTION.classList.remove(SUCCESS_CLASS);
    $DESCRIPTION.value = "";
    $CALORIAS.classList.remove(SUCCESS_CLASS);
    $CALORIAS.value = "";
    $CARBOIDRATOS.classList.remove(SUCCESS_CLASS);
    $CARBOIDRATOS.value = "";
    $PROTEINAS.classList.remove(SUCCESS_CLASS);
    $PROTEINAS.value = "";
};

// Actualizando totales
const updateTotals = () => {
    let carboidratos = 0;
    let proteinas = 0;
    let calorias = 0;
    // Por buenas praxticas se utiliza un forEach y cumple la mism funcion que se busca
    // practicamente una funcion de alto orden, no utiizo el map por que  map siempre regresa
    // algo y de momento no importa capturar lo que regresa la iteracion que realizamos.
    LIST.forEach((item) => {
        carboidratos += item.carboidratos;
        proteinas += item.proteinas;
        calorias += item.calorias;
    });
    document.querySelector("#totalCalorias").textContent = calorias;
    document.querySelector("#totalCarboidratos").textContent = carboidratos;
    document.querySelector("#totalProteinas").textContent = proteinas;
};

// Permite realizar el rendereo de los items
const renderItems = () => {
    // otra manera de poder obtener un elemento por el name TAG
    // solo que este metodo consigue un arreglo de elementos
    const $CONTAINER = document.getElementsByTagName("tbody")[0];
    $CONTAINER.innerHTML = "";
    const ROWS = LIST.map((item, index) => {
        const {
            calorias, description,
            carboidratos, proteinas,
        } = item;
        const removeButton = createTag({
            tag: "button",
            attr: {
                class: "btn btn-outline-danger",
                onclick: `removeItem(${index})`,
            },
        })(trashIcon);

        return tableRow([description, calorias, carboidratos, proteinas, removeButton]);
    });
    $CONTAINER.innerHTML = ROWS.join("");
};


// Agregar elementos en la lista
const addElement = () => {
    const newItem = {
        description: $DESCRIPTION.value,
        calorias: parseInt($CALORIAS.value, 10),
        carboidratos: parseInt($CARBOIDRATOS.value, 10),
        proteinas: parseInt($PROTEINAS.value, 10),
    };
    LIST.push(newItem);
    cleanInputs();
    updateTotals();
    renderItems();
};

// funcion para validar los inputs
const validateInputs = () => {
    // Por cuestion de buenas practicas el resultado de una condición
    // Ternaria tiene que ser asignada a una variable o constante
    const DESCRIPTION_CLASS = (($DESCRIPTION.value) ? SUCCESS_CLASS : ERROR_CLASS);
    $DESCRIPTION.classList.add(DESCRIPTION_CLASS);

    const CALORIAS_CLASS = (($CALORIAS.value) ? SUCCESS_CLASS : ERROR_CLASS);
    $CALORIAS.classList.add(CALORIAS_CLASS);

    const CARBOIDRATOS_CLASS = (($CARBOIDRATOS.value) ? SUCCESS_CLASS : ERROR_CLASS);
    $CARBOIDRATOS.classList.add(CARBOIDRATOS_CLASS);

    const PROTEINAS_CLASS = (($PROTEINAS.value) ? SUCCESS_CLASS : ERROR_CLASS);
    $PROTEINAS.classList.add(PROTEINAS_CLASS);

    if ($DESCRIPTION.value && $CALORIAS.value && $CARBOIDRATOS.value && $PROTEINAS.value) {
        addElement();
    }
};

// Permite remover un item seleccionado
const removeItem = (position) => {
    LIST = LIST.filter((item, index) => position !== index);
    updateTotals();
    renderItems();
};

Julio J Yépez

David Antonio Ordóñez Cornejo

Yulissa Terán Cerquín

Juan Castro

teacher•

Carlos Gómez Mont

Daniel Castillo

Victor Lozada

Usuario anónimo

user•

Sebastián Buitrago

Carlos Eduardo Gomez García

Francisco Garcia [C6]

Javier Romero

sofia mejia

Eder Raúl Abarca Raviela

Alejandro Mejia Escobar

Tomas Goldenberg

Eliminar filas con splice y map en JS

Introducción al curso y conceptos base

Qué aprenderás sobre la programación funcional

Programación funcional: qué es

Boilerplate: Base para el proyecto del curso

Funciones

Funciones Algebraicas y Funciones de JavaScript

Qué son funciones puras

Proyecto: Obtener el valor de los inputs

Objetos y Tipos de Memoria en JavaScript

Copiar y modificar objetos en JavaScript

Utilizando inmutabilidad en nuestras funciones

Proyecto: Validar inputs

Estado compartido en funciones

Estado compartido o shared state

Proyecto: Agregar elementos a la lista

Composición de funciones, Closures y Currying

Funciones compuestas o Function Composition

Completando las funciones para generar etiquetas HTML

Closures en JavaScript desde cero

Currying

Proyecto: Construyendo filas y celdas

Higher Order Functions

Introducción a las Higher Order Functions

Proyecto: Actualizando el total de calorías

Proyecto: Mostrar elementos