How can I propagate click events to a button from an interior span element?

user_15701872 0
Viewed 68

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);
}
button html javascript
2 Answers

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')) {

user_105669800

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