Question

0

282

Vistas

Eliminar li usando Node.remove() en JavaScript no funciona

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.

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

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

Ilustración

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

about 4 years ago · Juan Pablo Isaza Denunciar

0

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-03T09:52:57.585Z

Debe usar event.stopPropagation() al final de su deleteButton.addEventListener . Solucionará tu problema.

Lo que está sucediendo con su código es el siguiente.

Cuando haga clic en el botón x , invocará el evento de clic para ese button , así como el evento de clic de li .
Entonces, primero invocará el evento de clic de x & from deleteButton.addEventListener y eliminará su li .
Luego invocará el evento de clic de li y, según el código de li.addEventListener , moverá li a otro ul .
El método stopPropagation() de la interfaz de eventos evita que el evento actual se siga propagando en las fases de captura y burbujeo.
Entonces, si usa 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>

0

282

Eliminar li usando Node.remove() en JavaScript no funciona

2 Respuestas

0

Ilustración

WYSIWYG => WHAT YOU SHOW IS WHAT YOU GET

0

Encuentra empleos remotos

Andres GPT

`WYSIWYG` => `WHAT YOU SHOW IS WHAT YOU GET`