Assistance with an unsolved javascript issue

Question

This is following on from a problem I was having, and am continuing to have, earlier. I posted a question on it here: Updating an array on button click Javascript already but I still couldn't find a solution. Perhaps I didn't explain it entirely clearly.

Basically, what I'm aiming to do is remove an element from an array when the user clicks a link. what my program does currently, is remove it from the array (I can tell from alerts I have used to test) and the screen. However when I add an element from scratch again it seems to re-add/retain the values that were just deleted.

var theImages = new Array();

//When the user clicks save
//The image(dataURI) is added to an array.
//JSON.stringify function used to store the dataURIs in localStorage:
function save(URL) {
    theImages.push(URL);
    var x = JSON.stringify(theImages);
    localStorage.setItem('images', x);

//drawImages function called and the array is passed through in string form.    
drawImages(x);
}

function drawImages(array){

    //Convert the array back into array form:
    array = JSON.parse(array);
    //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);
    }

    //Loop to display all images in the array:
    for (var x=0; x < array.length; x++){ 
    //alert(array.length);
                    //Create image for each value in array:


                    //Create a div to contain each image:
                    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";



             //Add the container(s) to the surrounding main container:
             document.getElementById("saveArea").appendChild(divimg);


                                            //Create the image:
                    var img = document.createElement("img");

                                            //Set the source equal to point x in the 
                                            //Array of dataURIs
                                            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 = "#";

                                            //Make the close button image a link:
                    link.appendChild(close);

                    link.nameIndex = x;

                    //When the close button is clicked:
                    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');

                                //Put array back in string form to store in local storage
                        array = JSON.stringify(array);

                        localStorage.setItem('images', array);
                           //Call the function again and pass it the updated array:
                        drawImages(array);
                    } );


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

    } //End Loop

} //End drawImages();

I really can't get this working. I can't find the issue & would like/appreciate any help as it's really annoying me at this stage. >(

I do realise that this was posted already but felt the need to explain and comment it a little further.

If it isn't clear what the issue is I will answer any questions you have about the code.

original Q: Updating an array on button click Javascript

Answer 1

Your problem is that you are not using a single array. Clicking save adds elements to the global theImages array, but theImages isn't passed to drawImages. Clicking a.close removes elements from the 'array' array, but it doesn't alter theImages. So theImages gets added to when you click save, but never removed from. You should probably pursue a solution where you don't transform your array into a string and then back again, but to get your code working with the least amount of work, I think simply assigning 'array' to theImages will do the trick:

function drawImages(array){

    //Convert the array back into array form:
    array = JSON.parse(array);
    theImages = array;
    /* ... */
}

Answer 2

Try changing the way you save the information to local storage again.

The code under this line:

alert("You clicked to close image "+(imageNum+1));

Test this:

var imgArr = JSON.parse(localStorage.getItem('images'));
imgArr.splice(x, 1);

alert("The length of this array is: "+imgArr.length);

localStorage.removeItem('images');

localStorage.setItem('images', JSON.stringify(imgArr));

drawImages(imgArr);

Please let me know.

What I assume is the fact that by using array as the variable it is always accessing an already existing variable that contains the full list of images. Therefore a splice() might be removing the current image being removed, but "restoring" any other previously removed.

If you are passing x to the function (the image index), what is the use of doing var imageNum = this.nameIndex;. Might as well just use x: alert("You clicked to close image "+(x+1));.