Estoy trabajando para mejorar mi javascript vainilla. Estoy tratando de hacer que este botón de eliminar funcione. No sé qué lo bloquea. Ni siquiera puedo hacer clic y obtener el evento.objetivo del botón o la papelera. Solo hace clic en el 'li'.
Intenté poner la funcionalidad de eliminación en una función separada propia, pero luego no pude recorrer las tareas agregadas. Estoy abierto a métodos con agregar una identificación o sin necesidad de una identificación.
const todoInputEl = document.querySelector('.todo__input'); const todoListEl = document.querySelector('.todo__list'); const todoItemEls = document.querySelectorAll('.todo__item'); function addListItem() { todoInputEl.addEventListener('keypress', function(event) { if (event.keyCode === 13) { let newListItem = createListItem(todoInputEl.value); todoListEl.insertBefore(newListItem, todoListEl.childNodes[0]); todoInputEl.value = ''; } const deleteButtonEls = document.querySelectorAll('.delete-task'); for (let i = 0; i < deleteButtonEls.length; i++) { deleteButtonEls.addEventListener('click', function() { this.parentNode.remove(e); }) } }) }; function createListItem(text) { const newListElement = document.createElement('li'); newListElement.innerHTML = ` <span class="task-text">${text}</span> <button class="delete-task">Delete<i class="fas fa-trash"></i></button> `; newListElement.setAttribute("class", "todo__item"); return newListElement; }; function toggleDone() { todoListEl.addEventListener('click', function(event) { console.log(event) if (event.target.classList.contains('todo__item')) { event.target.classList.toggle('done'); } }) }; addListItem(); toggleDone(); <div class="container"> <div class="todo"> <div class="todo__header"> <h1 class="todo__title">to-do's</h1> <label for="todo input"> <input class="todo__input" type="text" placeholder="enter a todo"> </label> </div> <div class="todo__body"> <ul class="todo__list"> <!-- <li class="todo__item">Do your laundry</li> <li class="todo__item">Create a video</li> <li class="todo__item">Edit video content</li> --> </ul> </div> </div> </div>javasu deleteButtonEls se activa cada vez que tiene un evento de pulsación de tecla
y su regreso:
"TypeError: deleteButtonEls.addEventListener is not a function at HTMLInputElement.<anonymous>"EDITAR (Corregido): no estoy seguro de si esto es lo que estás buscando, pero esto funciona
const todoInputEl = document.querySelector('.todo__input'); const todoListEl = document.querySelector('.todo__list'); const todoItemEls = document.querySelectorAll('.todo__item'); function addListItem() { todoInputEl.addEventListener('keypress', function(event) { if (event.keyCode === 13) { let newListItem = createListItem(todoInputEl.value); todoListEl.insertBefore(newListItem, todoListEl.childNodes[0]); todoInputEl.value = ''; } }) }; function deleteListItem(target){ const x = target.getElementsByClassName('delete-task') x[0].addEventListener('click', function() { target.remove(); }) } function createListItem(text) { const newListElement = document.createElement('li'); newListElement.innerHTML = ` <span class="task-text">${text}</span> <button class="delete-task">Delete<i class="fas fa-trash"></i></button> `; newListElement.setAttribute("class", "todo__item"); deleteListItem(newListElement) return newListElement; }; function toggleDone() { todoListEl.addEventListener('click', function(event) { // console.log(event) if (event.target.classList.contains('todo__item')) { event.target.classList.toggle('done'); } }) }; addListItem(); toggleDone(); esto pasa el elemento creado a deleteListItem() después de configurarle el atributo todo__item
obtiene la clase con 'delete-task' y establece un detector de eventos en el elemento que es el botón con ese nombre de clase
al hacer clic elimina todo el elemento
su función toggleDone() nunca funcionó, comente si necesita ayuda con eso, no quería arreglar algo que quiere probar usted mismo