I'm trying to delete parent div when button is clicked. But when I click not the button itself but the icon inside it (span), the parent element for it is the button, not div outside button. Is there any possibility to merge this span with button, so when the span is clicked it is treated as clicking the button?
Here is how button is created:
//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);
}
Add the eventListener directly to the button, not toDoList. That is the best option.
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);
}
I would add the eventListner to the button directly, but otherwise u could also check the parent for the class
if (item.classList.contains('trash-button') || item.parentNode.classList.contains('trash-button')) {
or cleaner with closest
if (item.closest('.trash-button')) {