当指定为仅删除一次时，拼接将从数组中删除多个项

Question

I have created a mockup shopping basket, the quantity add's fine but the remove isn't working as it should. I have specificed in the remove method to splice at the location and to remove only 1 entry from the array but it seems to remove them all.

To reproduce the error just

Add 3 x Swede Add 3 x Parsnip

Remove 1 x Swede

You can see the code via online IDE here https://codio.com/adam91holt/305CDE-Challenge-3

Here is the full JS code - the remove funtion is at the bottom

var shop = (function() {
    var items = [];
    var basketItems = [];
    var count = 0;
    return {
        //Constructor to create the item
        addItem: function(title, description, price) {
            this.title = title;
            this.description = description;
            this.price = price;
            this.id = count;
            this.remove = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            this.quantity = title
            this.html = '<tr><td>' + this.title + '</td><td>' + this.description + '</td><td>' + this.price + '</td><td><button id="' + this.id + '">Add To Basket</button></td><tr>';
            this.inBasket = '<tr id="' + this.remove + '"><td>' + this.title + '</td><td>' + this.price + '</td><td><div id="' + this.quantity + '">1</div>' + '</td><td><button id="' + this.remove + '"> Remove </button><tr>';
            items.push(this);
            count++;
        },
        //Sends new items to constructor
        createItems: function() {
            new this.addItem('Carrott', 'Lovely orange vegetable!', parseFloat(0.50).toFixed(2));
            new this.addItem('Potato', 'Fresh baking potato.', parseFloat(0.75).toFixed(2));
            new this.addItem('Brocolli', 'Green trees!', parseFloat(0.49).toFixed(2));
            new this.addItem('Parsnip', 'Sweet tasting.', parseFloat(0.60).toFixed(2));
            new this.addItem('Swede', 'Tasty fresh Swede.', parseFloat(1.00).toFixed(2));
            console.log(items);
            this.printHtml()
        },
        //Add's the html to the table from the item object
        printHtml: function() {
            var table = document.getElementById("output")
            items.forEach(function(item) {
                table.innerHTML += item.html;
            })
            this.listenerAdd()
        },
        //Creates a listener for adding to the basket
        listenerAdd: function() {
            items.forEach(function(item) {
                document.getElementById(item.id).addEventListener("click", function() {
                    shop.addToBasket(item)
                });
            });
        },
        //Creates a listener for removing from the basket
        listenerRemove: function() {
            basketItems.forEach(function(item) {
                document.getElementById(item.remove).addEventListener("click", function() {
                    shop.remove(item)
                });
            });
        },
        //Add's the item once the event listener has been triggered
        addToBasket: function(item) {
            basketItems.push(item);
            this.total();
            var basket = document.getElementById("basketitems");
            var quantity = document.getElementById(item.quantity);
            var howMany = this.checkQuantity(item);
            if(howMany <= 1) {
                basket.innerHTML += item.inBasket;
                this.listenerRemove();
            } else {
                quantity.innerHTML = howMany;
            }
        },
        //Checks basket to see if it is already there
        checkQuantity: function(item) {
            var searchTerm = item.title;
            var howMany = 0;
            for(var i = 0; basketItems.length > i; i++) {
                if(basketItems[i].title === searchTerm) {
                    howMany++
                }
            }
            return howMany;
        },
        //Calculates the running total
        total: function() {
            var total = 0
            basketItems.forEach(function(items) {
                var price = items.price;
                total = total + parseFloat(price);
            })
            var totalHTML = document.getElementById("total");
            totalHTML.innerHTML = '<b>Total = ' + parseFloat(total).toFixed(2) + '</b>';
        },
        //Allows you to remove items from the basket
        remove: function(item) {
            var where = basketItems.indexOf(item);
            var quantity = document.getElementById(item.quantity);
            basketItems.splice(where, 1);
            this.total()
            var howMany = this.checkQuantity(item);
            if(howMany === 0) {
                console.log(item.remove)
                var row = document.getElementById(item.remove);
                row.parentNode.removeChild(row);
            } else {
                quantity.innerHTML = howMany;
            }
        }
    }
})();

function init() {
    'use strict';
    shop.createItems()
};
//On window load call init function
window.onload = init;

Answer 1

So in the event listener called listenerRemove you do a for each which results in basically registering the same event to the same click 5 times if the quantity is 5. Solution is to only register event for new items only so first change is get the item into the table using document.createElemenet

like this:

var tr = document.createElement('tr');

Give it your random ID

tr.id = item.remove;

Append the text from item.inBasket

tr.innerHTML = item.inBasket;

now append it to the table if it's new Item

basket.appendChild(tr);

Register event

this.listenerRemove(item);

In event register do a single registration rather than a foreach

listenerRemove: function(item) {        

document.getElementById(item.remove).addEventListener("click", function() {
                shop.remove(item)
            });
    },

And the rest see in the fiddle http://jsfiddle.net/guqno66d/