Eliminar y editar tareas del DOM

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 } ```

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

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) }) ```

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(); }); }); ```

```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; } ```

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(); } }

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()    } }

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"); } ```