Eliminar y editar tareas del DOM

Curso de JavaScript: Manipulación del DOM

Entendiendo el DOM

Manipulación del DOM con JavaScript para Páginas Dinámicas

Manipulación del DOM con JavaScript: Selección y Modificación de Elementos

Diferencias entre DOM y objeto Window en JavaScript

Seleccionando y Accesando a Elementos del DOM

Selección de Elementos del DOM con JavaScript

Métodos de navegación jerárquica en el DOM: padres e hijos

Manipulando Elementos del DOM

Atributos vs Propiedades en HTML y su Manipulación con JavaScript

JavaScript: Modificación Dinámica de Texto en HTML

Modificar estilos CSS con JavaScript

Manipulación de Clases con classList en JavaScript

Manipulación del DOM: Crear y Eliminar Elementos con JavaScript

Añadir Elementos de Forma Eficiente con insertAdjacentHTML

Crear nodos DOM: Uso de createElement en JavaScript

Eliminar Elementos del DOM: Métodos Remove y RemoveChild

Clonación y Reemplazo de Elementos con JavaScript

Manipulando Eventos en el DOM

Eventos JavaScript: Capturing y Bubbling en el DOM

Eventos en JavaScript: cómo añadir y quitar listeners en HTML

Eventos en JavaScript: Accediendo y Manipulando el DOM

Validación de Formularios con JavaScript: Evita Comportamientos por Defecto

Delegation Pattern en JavaScript: Optimización de Eventos Click

Creando un Administrador de Tareas

Construyendo un Task Manager con Persistencia usando Local Storage

Delegación de Eventos para Botones Borrar y Editar en JavaScript

Persistencia en Local Storage: Guardar y Recuperar Tareas

Edición y Sincronización de Tareas en Local Storage

JSON y Local Storage en Aplicaciones Web

Persistencia de Tema en JavaScript: Cambiar entre Light y Dark

Manipulación de DOM con JavaScript para Páginas Dinámicas

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript: Call Stack y Web APIs

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

¿Cómo agregar funcionalidad a los botones de una aplicación de tareas?

El aumento de la funcionalidad en una aplicación es crucial para garantizar una experiencia de usuario fluida y útil. En el contexto de una aplicación para gestionar tareas, la capacidad de editar o eliminar una tarea con un simple clic es de suma importancia. Veamos cómo implementar estas funciones esenciales en una aplicación de lista de tareas utilizando JavaScript.

¿Cómo implementar la delegación de eventos?

La delegación de eventos es una técnica eficaz que se utiliza para gestionar eventos en aplicaciones. Facilita el manejo de eventos en elementos secundarios mediante la vinculación del evento a un elemento padre.

document.querySelector('#task-list').addEventListener('click', event => {
  if(event.target.classList.contains('delete')) {
    deleteTask(event.target.parentElement);
  } else if(event.target.classList.contains('edit')) {
    editTask(event.target.parentElement);
  }
});

Al asociar el evento click al elemento padre task-list, identificamos el elemento específico que fue clicado mediante event.target. Posteriormente, comprobamos las clases de ese target para determinar la acción correspondiente: eliminar o editar.

¿Cómo borrar una tarea de manera eficiente?

La acción de borrar una tarea es esencial para mantener la lista actualizada y despejada de tareas completadas o irrelevantes.

function deleteTask(taskItem) {
  if(confirm("¿Estás segura, seguro, de borrar este elemento?")) {
    taskItem.remove();
  }
}

Mediante un confirm, solicitamos al usuario que verifique la acción antes de eliminar la tarea. Si el usuario confirma, utilizamos remove() para borrar el elemento del DOM.

¿Cuál es el proceso para editar una tarea?

Editar contenido de una tarea mejora la flexibilidad y precisión de nuestro listado.

function editTask(taskItem) {
  const newTask = prompt("Edita la tarea:", taskItem.firstChild.textContent);
  if(newTask !== null) {
    taskItem.firstChild.textContent = newTask;
  }
}

Aquí se muestra un prompt con el contenido actual de la tarea, permitiendo su modificación. Comprobamos que la respuesta no sea null antes de aplicar el cambio.

En resumen, estos pasos no solo amplían la funcionalidad de nuestra aplicación, sino que también mejoran la interactividad del usuario, volviendo la gestión de tareas más eficiente y amigable. Experimenta implementando estas características para ver cómo se transforma la experiencia del usuario en tu aplicación. Y recuerda, la práctica constante y la exploración son clave para desarrollar habilidades avanzadas en programación.

Aportes 13

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Natalia Gallego Heras

hace 9 meses

En los recursos de la clase anterior dejaron el código tal y como aparece al inicio de esta. Lo dejo por aquí porque está interesante ya que con él se crean las tareas y los botoncitos de borrar y editar: ```js const taskForm = document.getElementById('task-form') const taskList = document.getElementById('task-list') taskForm.addEventListener('submit', (event) => { event.preventDefault() const taskInput = document.getElementById('task-input') const task = taskInput.value console.log(task) if(task) { taskList.append(createTaskElement(task)) taskInput.value = '' } }) function createTaskElement(task) { const li = document.createElement('li') li.textContent = task li.append(createButton('❌','delete-btn'), createButton('✏️','edit-btn')) return li } function createButton(text, className) { const btn = document.createElement('span') btn.textContent = text btn.className = className return btn } ```

Juan Esteban Munoz

hace 9 meses

En la clase anterior no se mostró como colocaron las funciones de los botones.

Luispablo024085

hace 9 meses

Hola, en esta clase el profesor no desarrolla la parte de crear los nuevos elementos por lo que me di la tarea de crear una función que hiciera esto, en la funcion utilizo un método llamado setAttribute el cual toma como parametros el atributo y el nombre que le quiero dar a este, lo utilice para poder crear atributos clase e id. Espero les sirva :) ```js function createNewListItem(task){ new_li = document.createElement("li") new_li.textContent = `${task}` new_first_span = document.createElement("span") new_first_span.setAttribute("class", "edit-btn") new_first_span.textContent = "✏️" new_second_span = document.createElement("span") new_second_span.setAttribute("class","delete-btn") new_second_span.textContent = "❌" new_li.append(new_first_span) new_li.append(new_second_span) return new_li } ```taskForm.addEventListener("submit", (event)=>{ event.preventDefault() const taskInput = document.getElementById("task-input") const task = taskInput.value; // console.log(task) nuevo\_item = createNewListItem(task) taskList.append(nuevo\_item)})La implementa de la siguiente manera:```js taskForm.addEventListener("submit", (event)=>{ event.preventDefault() const taskInput = document.getElementById("task-input") const task = taskInput.value; // console.log(task) nuevo_item = createNewListItem(task) taskList.append(nuevo_item) }) ```

juan manuel silva molina

hace 4 meses

que me falte la clase donde se crean las funciones de los botones me hace plantearme si realmente fue una buena inversión pagar la suscripción...

Miguel Angel Castillo Enriquez

hace un mes

Soy yo o se salto la clase me quede en console.log(task); >: (

Williams Antonio Hernandez Ardila

hace 7 meses

con este código lo editamos con menos lineas de código y sin necesidad de crear una función: const taskList = document.querySelector("#task-list"); taskList.addEventListener("click", (e) => { if (e.target.classList.contains("delete-btn")) { if (confirm("Are you sure?")) { e.target.parentElement.remove(); } }

Tomas Arriola

hace 8 meses

Tiene alguna contra usar el innerHTML ? Me parece mucho más facil. ```js taskForm.addEventListener("submit", (event) => { event.preventDefault(); const task = taskInput.value; const li = document.createElement("li"); li.innerHTML = ` ${task} ❌ ✏️ `; taskList.appendChild(li); taskInput.value = ''; li.querySelector('.delete-btn').addEventListener('click', function() { li.remove(); }); }); ```

Alicia Rivas

hace 9 meses

```js const formulario = document.getElementById('task-form'); const input1 = document.getElementById('task-input'); const listaTarea = document.getElementById('task-list'); formulario.addEventListener('submit', (e) => { e.preventDefault(); const tarea = input1.value; if(tarea){ listaTarea.append(creaElementos(tarea)); input1.value = null; } }); function creaElementos(tarea){ const li = document.createElement('li'); li.textContent = tarea; const editar = creaBoton('✏️', 'edit-btn'); editar.addEventListener('click', (e) => editarTarea(li)); li.append(editar); const borrar = creaBoton('❌', 'delete-btn'); borrar.addEventListener('click', (e) => eliminarTarea(li)); li.append(borrar); return li; } function creaBoton(text, className){ const boton = document.createElement('button'); boton.textContent = text; boton.className = className; return boton; } ```

Nazaret Gutiérrez Martín

hace 3 meses

No suelo escribir por aquí pero siento que debo hacerlo ahora, ya me ha ocurrido en alguna otra ocasión que paso de una clase a otra y resulta que se ha avanzado mucho de repente, lo que quiere decir que algún vídeo está faltando, y yo que estoy recién aprendiendo esto no me ayuda a avanzar correctamente porque lo que se ve de golpe me falta toda una explicación... Y si en los comentarios se dice, se agradecería que quién gestiona subir vídeos le eche un ojo. Por lo demás estoy muy contenta pero este fallo me frena un poco mi aprendizaje. Si lo pueden solucionar sería perfecto para quien venga detrás de los que estuvimos ya aquí. Gracias!

Fernando Gamaliel Landaeta López

hace 3 meses

En la clase anterior no se explicó cómo crear las tareas. Sin embargo me sirvió como reto para poner en práctica lo que he aprendido hasta ahora. Les comparto mi solución para añadir tareas: ```js const taskForm = document.getElementById("task-form"); const taskList = document.getElementById("task-list"); taskForm.addEventListener("submit", (e) => { e.preventDefault(); const taskInput = document.getElementById("task-input"); const task = document.createElement("li"); const deleteCloneBtn = document.createElement("span"); const editCloneBtn = document.createElement("span"); deleteCloneBtn.textContent = "❌"; editCloneBtn.textContent = "✏️"; task.textContent = taskInput.value; task.append(deleteCloneBtn); task.append(editCloneBtn); console.log(task); taskList.append(task); }); ```

Carlos Andres Arteaga escobar

hace 4 meses

cada día siento que debo practicar mas y mas const taskform = document.getElementById("task-form");const tasklist = document.getElementById("task-list"); taskform.addEventListener("submit",( evento) => { evento.preventDefault(); const taskinput = document.getElementById("task-input"); const task = taskinput.value; console.log(task); if(task) { tasklist.appendChild(createTaskElement(task)) taskinput.value = '' } });function createTaskElement(task) { const li = document.createElement('li') li.textContent = task li.append(createButton('❌','delete-btn'), createButton('✏️','edit-btn')) return li } function createButton(text, className) { const btn = document.createElement('span') btn.textContent = text btn.className = className return btn } tasklist.addEventListener('click', (event) => { if (event.target.classList.contains("delete-btn")) { deletetask(event.target.parentElement); } else if (event.target.classList.contains("edit-btn")){ edittask(event.target.parentElement); } }); // creamos una funcion para averiguar si desea borrar el elemnto function deletetask (taskItem){ if (confirm("estas seguro de borrar el elemento...")){ taskItem.remove(); } } function edittask(taskItem){ const newtask = prompt("edite el nuevo texto: " , taskItem.firstChild.textContent); if (newtask !== null){ taskItem.firstChild.textContent = newtask; } }

Sebastián Martínez

hace 7 meses

He tomado una ruta distinta a la del profe pero funciona. Así voy: // constantes para input, botón, area de contenidoconst taskManagerInput = document.getElementById("task-manager\_\_input");const taskManagerAddTask = document.getElementById("task-manager\_\_add-Task");const taskManagerTasks = document.getElementById("task-manager\_\_tasks"); //Escuchador que al detectar click en "Add Task" agrega un nuevo task con nombre y botón XtaskManagerAddTask.addEventListener ("click", ()=>{ //constante que guarda en constante inputValue el value digitado en el input a la hora de hacer click const inputValue = taskManagerInput.value; if (taskManagerInput.value===""){ alert("input can't be empty"); return; } else { //constantes que crean los componentes del task mediante createElement const newTask = document.createElement("li"); const newXButton = document.createElement("button"); const newTaskContainer = document.createElement("div"); //Para agregarle el contenido al task y al botón de borrar newTask.textContent = `${inputValue}`; newXButton.textContent = `X`; newXButton.classList.add("deleteButton"); /\*LECCION: no se agrega clase con .class="Lo que quieres agregar" sino con .classList.add("Lo que quieres agregar"). También puedes usar .className = "Lo que quieres agregar". OJO: className cambia totalemente la clase mientras classList.add() agrega sin cambiar lo que ya está\*/ //Ya creadas las partes que necesita un nuevo task se agrega el task y sus partes mediante .append taskManagerTasks.append(newTaskContainer); newTaskContainer.append(newTask); newTaskContainer.append(newXButton);}taskManagerInput.value=""}); taskManagerTasks.addEventListener ("click", (event)=>{ if (event.target.classList.contains("deleteButton")) { deleteTask (event.target.parentElement); } else{ console.log(event); }}); function deleteTask (taskItem) { if (confirm("Are you sure you want to delete this item?")){ taskItem.remove() } }

Daniel Andres Rojas Paredes

hace 8 meses

Hola, que lindo el proyecto, pero tiene (en la version original hasta lo que he visto) un pequeño problema de accesibilidad, muy facil de detectar desde la construccion, si tienes el conocimiento, y muy facil de arreglar. como no me suele salir bien lo de agregar codigo a mis comentarios,lo explicare todo en palabras primero. los spam no estan dentro del tab index, asi que la x y el lapiz no son accesibles con el teclado, podrias intentar agregarlos manipulando el tab index, pero si bas a crear tareas serialmente, esto puede llegar a ser un problema si no lo manejas bien. ademas es tan facil como crear un button en vez de un spam, el textContent no cambia, y lo unico adicional sria agregarle un area-label, para que los lectores de pantalla no lean buton sino lo que el boton hace. una forma de hacerlo podria ser la siguiente: ```js switch (classname){ case "delete-btn": btn.setAttribute("aria-label","delete"); case "Edit-btn": btn.setAttribute("aria-label","Edit"); } ```