Difficulty removing item from shopping cart list

Hi there,
I am building this fashion e-commerce site (used fakestore API) as a side project to retain my knowledge of HTML, CSS and JavaScript while I continue learning react.

Here is the problem, the cart item count doesn’t restart from 0 when I add new items to the cart instead it continues counting from the removed cart items numbers

I checked the element panel of the developer tools and I saw that the items were removed from the cart when i clicked the remove button. The moment I decided to add new items to the cart, the previously removed item get populated back inside cart hence this affect the cart item count.

Here is the codepen link:

https://codepen.io/Que0/pen/jOwgGEB

could you give more details? what part of the code is used to populate the item in the cart? which one to remove it? which one calculate the quantity?

Sorry but that’s a huge project, giving help would be quite some work to actually read, study and understand your code…

If the supposedly removed item is added back into the cart, that means it’s not fully removed but actually kept somewhere in the internal memory of the app. If the devtools say the item got removed, that means there must be another piece of code that isn’t affected by the removal and once you add another item, this previous object is called again and all items inside it are used to generate the cart, resulting in the re-adding (at least that’s a guess).

So you gotta check all objects that are included in the “add to cart” logic and see if they are all adjusted during the “remove from cart” action.

That’s all I can say without spending 1-2 hours reading your code in hopes of finding wherever you put one logic or the other…

I didn’t look too much at it but it doesn’t look like you are actually removing the product from the cart array. You are also not updating the state of the buttons.


I would suggest you fetch the product’s data and create a data structure locally of the fetched data. So an array of objects. Same for the cart, create a cart data structure.

Do not rely on the DOM content for the state, make the DOM reflect the state of a data structure. You add or remove using the data structure and the DOM just reflects any change to the data. Each product object has an id you can use to identify it. The data structure is your source of truth, not the DOM. The cart data is basically just a selective version of the products data.

It’s basically a todo app the only difference is you have to identify the product when adding it to the list so you would likely add the product id to the DOM.

1 Like

@ilenia, thanks for your feedback… getDOMElements function is where I am adding items to the cart. I have a local variable called cart which is an array that will keep track of the various buttons for adding items into the cart.

The problem then comes inside handleRemoveItem function where i remove the element from the DOM(cart). but next time i click a button to add, I am again reading that cart variable (which still has all the items in it) and those all get added back to the cart plus the recently clicked item.

What I haven’t been able to do is to get the cart in getDOMElements to be modified and recalculated when I click on remove button

The handleCartItemCount function calculates the no of items I have in the cart

Hi @lasjorg , I think you are right about not removing product from the cart array when the removed button is clicked.

What I have tried to tackle this:

I moved cart from getDOMElements to a global variable so that other functions (handleRemoveItems) can have access to it.

I tried to filter the cart when the remove button is clicked but it didn’t work also

PS: I have been stucked for weeks trying to solve this and every little solution I come up didn’t seems to work. Hence the reason I am seeking for help here

I would suggest you completely rethink your approach to this using the method I explained. If you need examples of how it works pretty much any todo app (which there are tons of tutorials on) will help solidify the knowledge. It also lets you work on a lot of the core logic without even touching the DOM. It doesn’t mean a complete rewrite but it will require some refactoring.

It will pay off big time learning to work the way I described and when you get more into React it will pay off even more as that is a core fundamental of how view libraries/frameworks work. The DOM is just a reflection of the state.

@lasjorg I appreciate your input. Yeah I do know that we have of Todo app tutorial out there, can you point me to a few good one that can help with this project. Thanks once again

Not really off the top of my head. I would have to look for it and not all of them are called todo apps.

A lot of apps are in fact at the core todo apps just with slight variations and called something different. Think shopping list, book reading list, inventory list, etc. The core is mostly the same. Use data structures (state) and do all data manipulation on the structures, make the DOM reflect the data structures (i.e. reflect the app state).

I know “Watch and Code” (search for it) served me well when first starting out and they use a todo list to teach some concepts. Check out the free version of the course they have I think it will be time well spent.

Random video from a fairly respected youtube channel I did not watch it and only briefly skimmed the code.

1 Like

@lasjorg This will be very helpful, thanks