I have a To-Do list with an input, button that adds elements and div where the tasks are saved. No database, just JS, so it when it refreshes, the list becomes empty again.
Here is the code. The problem is with the delete button. I create one for each tasks but it doesn’t works right. It sometimes delete only the element, but other times deletes the div with all of the tasks.
This is the line of code that gives me the error: deleteBtn.onclick = (e) => e.target.parentElement.parentElement.remove(). The problem is not with the parent element, I’ve tried to fix it without the double use of it and that can only delete the button or the element of the list – again different results from one single button.
So, what I saw is that console.log(e.target) gives me different things when I click the delete button.
- It sometimes takes only the
<i class="fa-solid fa-trash-can"></i>. - And other times it takes the whole button:
<button class="deleteTask"> <i ...></i> </button>.
So, can somebody tell me why e.target is not taking the same thing when I do click on the same button everytime