无法正确从购物车中删除商品（JavaScript和Jquery）

Question

Basically, I have a cart that I recently upgraded to support product customization (at a very basic level). The upgrades included color and material type for a particular bike in addition to name, price, and quantity.

The problem is that since the new features that I added use combo-boxes or options, every time I add items to the cart with slightly different color and material combination if I attempt to delete the previously added combinations, it will only allow me to delete the newest one.

I feel this is easier to show in code than to try and explain it. This is my logic for deleting items off the cart:

 //removing one particular item completely from the cart AS_shoppingCart.removeItemAll = function(name, color, material){ //for every item in the array which has the same name; remove. for (var i in this.cartShop) if(this.cartShop[i].name === name, this.cartShop[i].color === color, this.cartShop[i].material === material) { this.cartShop.splice(i, 1); break; }; AS_shoppingCart.saveLocalCart(); }; 

For those who are interested, this is how I store the object instances on the array:

 //THE LOGIC FOR THE SHOPPING CART - OOP var AS_shoppingCart = {}; //cart where the item objects will be stored AS_shoppingCart.cartShop = []; //item object and its properties AS_shoppingCart.Item = function(name, price, quantity, color, material) { this.name = name; this.price = price; this.quantity = quantity; this.color = color; this.material = material; }; 

This is how my HTML looks like. Note, the problem is with these options. In order to delete older cart entries, I have to select the option combination the same as the listed item. Which logically makes sense, but the problem is, I haven't got the slightest clue on how to go around this problem.

  <div> <h4>Customisation:</h4> <table> <tr> <th>Color</th> <th>Material</th> </tr> <tr> <td> <select id="colors" name="colors"> <option data-color="Default">Default</option> <option data-color="Blue">Blue</option> <option data-color="Green">Green</option> <option data-color="Brown">Brown</option> </select> </td> <td> <select id="materials" name="materials"> <option data-material="Alloy">Alloy</option> <option data-material="Steel">Steel</option> <option data-material="Carbon Fibre">Carbon Fibre</option> <option data-material="Titanium">Titanium</option> </select> </td> </tr> </table> </div> <div class="button-group"> <button class="add-to-cart" data-name="Aluminum road bike " data-price="256">Add to cart</button> </div> 

This is the jQuery part where it puts the logic into use. Note; I've cut out the irrelevant parts in the snippet.

 $(document).ready(function(){ /* CART */ //assigning a click event to DOM object $(".add-to-cart").click(function(event){ //prevents the page from being refreshed event.preventDefault(); //sets the name variable to a clicked data-name var name = $(this).attr("data-name"); //sets the price to the number version of data-price attribute var price = Number($(this).attr("data-price")); var color = $('#colors option:selected').data('color'); var material = $('#materials option:selected').data('material'); $(".add-to-cart").attr({ "data-color" : color, "data-material" : material }); AS_shoppingCart.addItem(name, price, 1, color, material); displayCart(); }); $("#show-cart").on("click",".delete-item", function(event){ var name = $(this).attr("data-name"); console.log(name); AS_shoppingCart.removeItemAll(name); displayCart(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

So my question is, how do I go about ensuring that I don't actually have to set my product item options to the older items in the cart in order to delete them.

Thank you.

EDIT: showing my addItem function:

 //adds items to the cart AS_shoppingCart.addItem = function(name, price, quantity, color, material){ /*checks to see if the item with the identical name exists in the cart if so, it will only increment the quantity of the said item (no redundancies)*/ for(let item of this.cartShop) { if(item.name === name && item.color === color && item.material === material) { item.quantity += quantity; this.saveLocalCart(); return; }; }; var item = new this.Item(name, price, quantity, color, material); this.cartShop.push(item); this.saveLocalCart(); }; 

Answer 1

I think you can use splice in javascript...

for example:

//removing from the quantity
AS_shoppingCart.removeItem = function(name, color, material){
    //for every item object in the cart
    for (let item of this.cartShop) {
        //check if the name matches and remove from qunatity if true.
       if(item.name === name && item.color === color && item.material === material) {
           item.quantity --; // change this to -> name_of_your_array.splice(index, howmany);
           this.saveLocalCart();
           //once the quantity reachers 0 or below, completely remove the item from cart.
           if(item.quantity === 0 || item.quantity < 0) {
               this.removeItemAll(item.name, item.color, item.material); // change this to -> name_of_your_array = [];
               this.saveLocalCart();
           };
           break;
       }; 
    };
    this.saveLocalCart();
};

I'm still not sure though, in my case before I was just using array. But definitely you can use splice. :)

Answer 2

It happens because you use break after finding first item in cart. Remove it to keep on iterating through items after finding first of it.

UPDATE 2

Also splice will provide change of items count so you better to reverse loop and delete items from last to first or simply use filter like this:

  //now items store shopcart with all items except those you want to remove
  //so you can store it back to this.cartShop or pass to another method to save new version of shopcart which is more acceptable way

  let items = this.cartShop.filter(function(item) => {
    return (item.name !== name && 
           item.color !== color && 
           item.material !== material)
  }

So your final code can be like this:

AS_shoppingCart.removeItemAll = function(name, color, material){

      this.cartShop = this.cartShop.filter(function(item){ return !(item.name === name && item.color === color && item.material === material) });

      AS_shoppingCart.saveLocalCart();
};