Actualmente estoy tratando de eliminar li haciendo clic en deleteButton. Este es mi código JS completo.
const form = document.querySelector('#form'); const savedList = document.getElementById('savedList'); const doneList = document.getElementById('doneList'); form.addEventListener('submit', (e) => { const li = document.createElement('li'); li.innerText = document.getElementById('input').value; li.id = li.innerText; li.isDone = false; li.isDone ? doneList.append(li) : savedList.append(li); const deleteButton = document.createElement('button'); deleteButton.innerText = 'x'; deleteButton.id = 'deleteButton'; li.append(deleteButton); li.addEventListener('click', () => { li.isDone ? (li.isDone = false) : (li.isDone = true); li.isDone ? doneList.append(li) : savedList.append(li); }); deleteButton.addEventListener('click', function(event) { const targetToDo = event.currentTarget.parentNode; console.log(targetToDo.parentNode); targetToDo.parentNode.remove(targetToDo); targetToDo.remove(); }); e.preventDefault(); }); <form id="form"> <input id="input" type="text" /> <button type="submit">Submit</button> </form> <ul id="savedList"></ul> <ul id="doneList"></ul>Sin embargo, se están eliminando otras listas, excepto targetToDo. Intenté depurar con console.log pero targetToDo y su parentNode están bien. Puedo ver li para targetToDo y ul para su parentNode. ¿Cómo puedo arreglar esto? Gracias por adelantado.
Prueba esto...
deleteButton.addEventListener('click', function(event) { const targetToDo = event.currentTarget.parentNode; console.log(targetToDo.parentNode); setTimeout(() => li.remove(), 0); // The li that will be removed also has the delete button as child and we are inside the event handler of that child. A setTimeout() works here });Con suerte, seguir una configuración rudimentaria junto con el código en OP para la ilustración está más cerca de las necesidades del OP.
const form = document.querySelector('#form'); const savedList = document.querySelector("#saved-list"); const doneList = document.querySelector("#done-list"); form.addEventListener('submit', (e) => { const li = document.createElement('li'); li.innerText = document.getElementById('input').value; li.id = li.innerText; li.isDone = false; li.isDone ? doneList.append(li) : savedList.append(li); //<--- This condition check is insignificant as we are setting it to false in the previous statement const deleteButton = document.createElement('button'); deleteButton.innerText = 'x'; deleteButton.id = 'deleteButton'; li.append(deleteButton); li.addEventListener('click', () => { li.isDone ? (li.isDone = false) : (li.isDone = true); li.isDone ? doneList.append(li) : savedList.append(li); }); deleteButton.addEventListener('click', function(event) { const targetToDo = event.currentTarget.parentNode; console.log(targetToDo.parentNode); // targetToDo.parentNode.remove(targetToDo); // targetToDo.parentNode.remove(); // targetToDo.remove(); setTimeout(() => li.remove(), 0); }); e.preventDefault(); }); <form id="form"> <input id="input" type="text" /> <button type="submit">Submit</button> </form> <ul id="saved-list"></ul> <ul id="done-list"></ul>WYSIWYG => WHAT YOU SHOW IS WHAT YOU GETDebe usar event.stopPropagation() al final de su deleteButton.addEventListener . Solucionará tu problema.
Lo que está sucediendo con su código es el siguiente.
x , invocará el evento de clic para ese button , así como el evento de clic de li .x & from deleteButton.addEventListener y eliminará su li .li y, según el código de li.addEventListener , moverá li a otro ul .stopPropagation() de la interfaz de eventos evita que el evento actual se siga propagando en las fases de captura y burbujeo.event.stopPropagation() en su deleteButton.addEventListener , evitará que se invoque más el evento li click y no podrá agregar li nuevamente a otro ul .Pruebe el código a continuación.
const form = document.querySelector('#form'); const savedList = document.querySelector("#saved-list"); const doneList = document.querySelector("#done-list"); form.addEventListener('submit', (e) => { const li = document.createElement('li'); li.innerText = document.getElementById('input').value; li.id = li.innerText; li.isDone = false; li.isDone ? doneList.append(li) : savedList.append(li); const deleteButton = document.createElement('button'); deleteButton.innerText = 'x'; deleteButton.id = 'deleteButton'; li.append(deleteButton); li.addEventListener('click', () => { li.isDone ? (li.isDone = false) : (li.isDone = true); li.isDone ? doneList.append(li) : savedList.append(li); }); deleteButton.addEventListener('click', function(event) { const targetToDo = event.currentTarget.parentNode; console.log(targetToDo.parentNode); // targetToDo.parentNode.remove(targetToDo); targetToDo.remove(); // Add below line. event.stopPropagation(); }); e.preventDefault(); }); <form id="form"> <input id="input" type="text" /> <button type="submit">Submit</button> </form> <ul id="saved-list"></ul> <ul id="done-list"></ul>