javascript - Splice is removing more that one item from array when specified to only remove once -

i have created mockup shopping basket, quantity add's fine remove isn't working should. have specificed in remove method splice @ location , remove 1 entry array seems remove them all.

to reproduce error just

add 3 x swede add 3 x parsnip

remove 1 x swede

you can see code via online ide here https://codio.com/adam91holt/305cde-challenge-3

here full js code - remove funtion @ bottom

var shop = (function() {     var items = [];     var basketitems = [];     var count = 0;     return {         //constructor create 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 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 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 html table item object         printhtml: function() {             var table = document.getelementbyid("output")             items.foreach(function(item) {                 table.innerhtml += item.html;             })             this.listeneradd()         },         //creates listener adding basket         listeneradd: function() {             items.foreach(function(item) {                 document.getelementbyid(item.id).addeventlistener("click", function() {                     shop.addtobasket(item)                 });             });         },         //creates listener removing basket         listenerremove: function() {             basketitems.foreach(function(item) {                 document.getelementbyid(item.remove).addeventlistener("click", function() {                     shop.remove(item)                 });             });         },         //add's item once 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 see if there         checkquantity: function(item) {             var searchterm = item.title;             var howmany = 0;             for(var = 0; basketitems.length > i; i++) {                 if(basketitems[i].title === searchterm) {                     howmany++                 }             }             return howmany;         },         //calculates 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 remove items basket         remove: function(item) {             var = 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; 

so in event listener called listenerremove each results in registering same event same click 5 times if quantity 5. solution register event new items first change item table using document.createelemenet

like this:

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

give random id

tr.id = item.remove; 

append text item.inbasket

tr.innerhtml = item.inbasket; 

now append table if it's new item

basket.appendchild(tr); 

register event

this.listenerremove(item); 

in event register single registration rather foreach

listenerremove: function(item) {          document.getelementbyid(item.remove).addeventlistener("click", function() {                 shop.remove(item)             });     }, 

and rest see in fiddle http://jsfiddle.net/guqno66d/