¡Buenos días! He estado tratando de descubrir cómo crear una función de eliminación en mi aplicación de tareas pendientes. No sé qué hacer a continuación y la función de eliminación y eventListener no son correctas. Espero que puedan ayudarme. Quiero entender completamente cada pequeño proyecto que hago. ¡Gracias de antemano! :)
const inputBox = document.querySelector('.input') const addBtn = document.querySelector('.input-button') const todoMain = document.querySelector('.todo-list') const deleteBtn = document.querySelector('.delete-button') const deleteAllBtn = document.querySelector('.clear-all') //Event listeners inputBox.addEventListener("keyup", function(){ let userInput = inputBox.value; if (userInput.trim() != 0) { addBtn.classList.add("active") } else { addBtn.classList.remove("active"); } }) addBtn.addEventListener("click", todoAdd); todoMain.addEventListener("click", todoDelete); // Functions function todoAdd(event){ event.preventDefault(); const todoLi = document.createElement('li'); todoLi.innerText = inputBox.value; const todoDeleteBtn = document.createElement('button'); todoDeleteBtn.innerHTML = `<i class="fas fa-trash-alt"></i>`; todoDeleteBtn.classList.add('delete-button') todoLi.appendChild(todoDeleteBtn); todoMain.appendChild(todoLi); inputBox.value = ''; addBtn.classList.remove("active"); }; function todoDelete(e){ const item = e.target; if (item.classList[0] === 'delete-button'){ todoMain.removeChild(todoLi); } } <link crossorigin rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /> <div class="container"> <h1>TODO list</h1> <div class="input-container"> <input type="text" class="input" placeholder="Input Text Here"> <button class="input-button"><i class="fas fa-plus"></i></button> </div> <ul class="todo-list"> </ul> <div class="footer"> <span>You have<span class="pending">0</span>pending task left</span> <button class="clear-all">Clear All</button> </div> </div>Hay un par de problemas que podrían estar impidiendo que esto funcione:
todoDelete intenta acceder a la variable todoLi , que no existe en su alcance. Usted define esto dentro de todoAdd , pero su alcance es limitado, por lo que no puede acceder a la variable desde fuera de la función. Sospecho que lo que podría querer hacer es pasar item en su lugar.
todoDelete a su elemento todoMain , lo que significa que e.target para la función siempre será el elemento ul , no su elemento de lista. Su if siempre es falso, por lo que el código nunca se ejecuta. Para solucionar esto, adjunte el detector de eventos a todoDeleteBtn en su función todoAdd en su lugar.
Lo he implementado simplemente como un ejemplo.
Al crear el elemento ToDo, agrego una clave para el texto y un atributo de datos para el botón Eliminar y un evento onclick.
La clave es importante para tener la relación entre el botón y el texto. Primero usé new Date() pero actualicé con un método aleatorio. (Math.random()+1).toString().split('.')[1];
Para deleteAll() puede obtener el nodo principal completo y establecer html en una cadena vacía.
const inputBox = document.querySelector('.input') const addBtn = document.querySelector('.input-button') const todoMain = document.querySelector('.todo-list') const deleteBtn = document.querySelector('.delete-button') const deleteAllBtn = document.querySelector('.clear-all') //Event listeners inputBox.addEventListener("keyup", function(){ let userInput = inputBox.value; if (userInput.trim() != 0) { addBtn.classList.add("active") } else { addBtn.classList.remove("active"); } }) addBtn.addEventListener("click", todoAdd); todoMain.addEventListener("click", todoDelete); // Functions function todoAdd(event){ event.preventDefault(); const todoLi = document.createElement('li'); const key =(Math.random()+1).toString().split('.')[1]; todoLi.innerText = inputBox.value; todoLi.setAttribute("id", key); const todoDeleteBtn = document.createElement('button'); todoDeleteBtn.innerHTML = `<i class="fas fa-trash-alt"></i>`; todoDeleteBtn.classList.add('delete-button') todoDeleteBtn.onclick = function() { const _key = this.getAttribute('data-key') document.getElementById(_key).remove(); this.remove() } todoDeleteBtn.setAttribute("data-key", key); todoLi.appendChild(todoDeleteBtn); todoMain.appendChild(todoLi); inputBox.value = ''; addBtn.classList.remove("active"); }; function todoDelete(e){ const item = e.target; if (item.classList[0] === 'delete-button'){ todoMain.removeChild(todoLi); } } <link crossorigin rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /> <div class="container"> <h1>TODO list</h1> <div class="input-container"> <input type="text" class="input" placeholder="Input Text Here"> <button class="input-button"><i class="fas fa-plus"></i></button> </div> <ul class="todo-list"> </ul> <div class="footer"> <span>You have<span class="pending">0</span>pending task left</span> <button class="clear-all">Clear All</button> </div> </div>