Item remove from list - please help

i build a shoes store project
i added items to shopping cart list by object-oriented programming
and I want to remove each item by remove button but I couldn’t make it

pleeeease help

source code :

Hello and welcome to the forum,

If you share your project using a git repository service like GitHub or GitLab, along with a deployed version on Vercel or Netlify for a live sample, it will be much easier for us to help you find the problem. Additionally, you can use services like CodePen or CodeSandbox to make your code live and more understandable. (If you don’t know how to use any of these, you can find many topics, documentation, or videos related to them on the web.)

You can also share your code here by using the preformatted text option in the text editor, which is shown as </>.

Additionally, please provide a detailed explanation of how your code works, what you have done to try and resolve the issue, and what you believe might be causing the problem. This will help others understand your issue better and offer more accurate solutions.

Sharing your code and explaining the problem thoroughly will increase the chances of getting effective help.

i upload it to github

in my project when i go to product section
and add an item it will be added to shopping cart less
the button of it in navbar

but i couldn’t the code of item removal when i click on the remove button on the left

Good job! If you deploy your project on Vercel or Netlify for a live sample, it would be more accurate. Additionally, writing your code in CodePen allows everyone, including yourself, to easily view and understand your code.

I understand what the problem is, but I’m not sure how you haven’t figured it out after implementing a dynamic chart with instance objects. Can you explain what you did to address this issue? How did you implement your clear button functions? Understanding your own code better will help you identify the origin of the issue, and explaining it will also help you gain clarity.

It is because you are clicking the icon and not the span.

You can add "I" to the tagName condition (check for both span and i elements). Or you can also add pointer-events: none to the icon in the CSS.

I would also suggest you make it a button.

I did like one of the object-oriented lesson in javascript lessons
but he didn’t make a function to clear item so I couldn’t know how to do it…

ok i have multiple I elements
how to assign the tagName to the latest

So you couldn’t learn enough JavaScript and DOM manupulation basics. It’s okay; everyone starts somewhere. If you want a quick and easy solution, you can create an event listener for each item-list object similar to your productBtn.

However, if you want to deepen your knowledge and manage your code more effectively, I recommend completing the interactive lessons on fCC. Additionally, this video might help you understand the concepts in a different way.

And sometimes the learning path is bumpy and hard, not as easy as following some click-bait 30-minute lessons. I’ve been there too. Keep learning and don’t get discouraged—you’re on the right track!

when i put he removed the span
i need something that can get more than parent element

Use something more specific than an element type. Like a dataset/id/class.

You shouldn’t do it like that anyway. Your source of truth is not the DOM. It is the data structure your DOM is rendering.

  • Create a cart data structure.

  • Add items to the cart data.

  • Render the cart data and add the item id to each cart item in the DOM.

  • Get the cart item id on click.

  • Filter the item out of the cart data structure.

  • Re-render the cart.