在按钮上更新数组单击Javascript

Question

This question may be a bit long winded but bear with me.

I am trying to update and array every time a user hits the save button.

When they click save an image of a canvas on the page is created.

These DataURI values are kept in an array.

Once the value is saved a thumbnail of sorts is created and added at the bottom of the screen.

Clicking the X icon on those images calls a function to remove the correct image from the array.

The images should then be redrawn with the update array values, thus removing it from the screen.

I have included images to try and demonstrate:

Image #1 (when save is clicked and image added below):

http://postimg.org/image/cybazwydf/

Image #2 (after closing the on screen images, adding a new image adds the deleted ones again along with the new one):

http://postimg.org/image/gi5pcornl/

That is the issue, that it re-adds the deleted values.

I will post the code for it below:

function getDataUrl () {
var a = document.getElementById("theCanvas");
var context = a.getContext("2d");
var dataURL = a.toDataURL();
save(dataURL);
}


var theImages = new Array();




//Add dataURL to array:
function save(URL) {
    theImages.push(URL);
    var x = JSON.stringify(theImages);
    localStorage.setItem('images', x);


drawImages(x);
}

function drawImages(array){

    var array = localStorage.getItem("images");
    array = JSON.parse(array);

    //If an image is saved, display the saveArea div:
    if (array.length > 0){
        document.getElementById("saveArea").style.visibility="visible";
    }

    //Clear the elements that might already be in the div so they don't appear twice:
    var theDiv = document.getElementById("saveArea");
    while (theDiv.firstChild) {
    theDiv.removeChild(theDiv.firstChild);
    }


    for (var x=0; x < array.length; x++){ 
                    //Create image for each value in array:



                    var divimg = document.createElement("div");

                    divimg.style.marginRight="10px";
                    //divimg.style.border = "1px dotted red";
                    divimg.className = "saveContainer";
                    divimg.style.width = 300+"px";
                    divimg.style.padding = 5+"px";
                    divimg.style.marginRight="10px";
                    divimg.style.height = 150+"px";
                    divimg.style.display="inline-block";    
                    divimg.style.marginRight="35px";


                    document.getElementById("saveArea").appendChild(divimg);

                    var img = document.createElement("img");
                    img.src = array[x];
                    img.width = 300;
                    img.height = 150;
                    img.setAttribute("id", "theImageId");
                    img.style.marginRight="10px";
                    img.className = "saveImg";


                    //Add each image to the containing div:
                    divimg.appendChild(img);




                    //Create close button: 
                    var close = document.createElement("img");
                    close.src="close.png";
                    close.width = 50;
                    close.height = 50;
                    close.border = 0;
                    close.style.position="relative";
                    close.style.bottom=115+"px";
                    close.style.right=40+"px";
                    close.className="closeButton";
                    //close.style.cssFloat="right";
                    //close.style.right= 0+"px";


                    var link = document.createElement("a");
                    link.href = "#";

                    link.appendChild(close);

                    link.nameIndex = x;

                    //WHEN THE USER CLICKS THE CLOSE ICON:
                    link.onclick = (function (x) {
                    var imageNum = this.nameIndex;
                    alert("You clicked to close image "+(imageNum+1));
                        //Remove the image:
                        array.splice(x,1);

                        alert("The length of this array is: "+array.length);
                        //Update localStorage:
                        localStorage.removeItem('images');
                        array = JSON.stringify(array);

                        localStorage.setItem('images', array);
                        drawImages(array);
                    } );




                    //Add the close button the the containing div:
                    divimg.appendChild(link);
                    //divimg.appendChild(close);

    } //End Loop

} //End drawImages();

I've been trying to solve this for hours but no luck..

Answer 1

After removing the image from the array you are not storing it anywhere so the splice result is lost and the array remains the same

    array.splice(x,1);

needs to be

    array =  array.splice(x,1);