Estoy tratando de eliminar el div principal cuando se hace clic en el botón. Pero cuando hago clic no en el botón en sí, sino en el ícono dentro de él (intervalo), el elemento principal es el botón, no el botón externo div. ¿Existe alguna posibilidad de fusionar este lapso con el botón, de modo que cuando se hace clic en el lapso, se trata como si se hiciera clic en el botón?
Así es como se crea el botón:
//Create trash button const trashButton = document.createElement('button'); trashButton.innerHTML = '<span class="material-icons">delete</span>'; trashButton.classList.add('trash-button'); todoDiv.appendChild(trashButton); //delete div of button todoList.addEventListener('click', deleteTask); function deleteTask(e) { const item = e.target; if (item.classList.contains('trash-button')) { item.parentNode.remove(); }; console.log(item); }Agregue eventListener directamente al botón, no toDoList. Esa es la mejor opción.
const trashButton = document.createElement('button'); trashButton.innerHTML = '<span class="material-icons">delete</span>'; trashButton.classList.add('trash-button'); todoDiv.appendChild(trashButton); //delete div of button button.addEventListener('click', deleteTask); function deleteTask(e) { const item = e.target; //here you also will use ternary conditional to double check if you want: item.classList.contains("trash-button") ? item.parentNode.remove() : button.parentNode.remove(); }; console.log(item); }Agregaría eventListner al botón directamente, pero de lo contrario, también podría verificar el padre para la clase
if (item.classList.contains('trash-button') || item.parentNode.classList.contains('trash-button')) {
o limpiador con el más cercano
if (item.closest('.trash-button')) {