Problem with Item List project

JavaScript
1

I’ve been doing some basics javascript projects trying to improve my skills. I made this simple Item list :

Item List

You can add an item and remove it. It has a confirmation before you remove it.
The problem comes when you say you don’t want to remove the item and then when you remove another item it removes the two items (the one confirmed to remove and the one that previously you said to not remove).

How can I solve this problem??

Thank you!!

2

It looks like your else statement doesn’t clear the selector, it just waits to delete the portion

1 Like
3

I tried and I think that that is not the problem. Or maybe I didn’t fully understand how to clear setTimeOut…

function removeItem(e) {
    if (e.target.classList.contains('remove')) {
        if (e) {
            confirmContainer.style.display = 'flex';
            let btn = document.querySelectorAll('.btnConfirm');

            let li = e.target.parentElement;

            btn.forEach((btns) => btns.addEventListener('click',
                function(e) {
                    let sTO = setTimeout(() => itemList.removeChild(li), 600);
                    if (e.target.classList.contains('yes')) {
                        confirmContainer.style.display = 'none';

                        li.style.animation = 'removeItem .6s ease forwards';
                        sTO;


                    } else {
                        confirmContainer.style.display = 'none';

                        clearTimeout(sTO);
                    }

                }));

        }
    }
}
4

When I ran it, the console said that sTO was not defined, and it looks like it is though. I tried a few different ways, but I kept getting the same result as you.

I did have some luck having .appendChild in the else statement, but that moved it to the bottom of the list

I can’t see anything else that may solve this problem, sorry that I wasn’t really able to help

1 Like
5

Thank you for the help! I’ll try something different today, it has to work some way or another!

6

I found this today when researching my own problem and I tried to use it on yours, but I don’t think I used it correctly.

Targeting Click of “Clear” Button (X) on Input Field

It uses the .empty command in jQuery.

Best of luck

7

@flors, were you able to figure out what the problem was?

8

Once again, I may have found something that might help when searching for my own problems :laughing:, Starting at " Create API controllers Get, Add, Update and Delete Todos" on down may help you with your problem.

Best of luck :slightly_smiling_face:

How to Build a Todo App with React, TypeScript, NodeJS, and MongoDB