Problem creating/removing sprites on button click

[jtruax303]

I am trying to create a click through image gallery for a project in pixi. You can see in my fiddle when you click on the right side of the screen it adds the next image. The problem is when you click on the left to delete the image it will only delete one and not the rest. 

Can someone please help me with this issue.  If you have any more questions, please feel free to ask. If there is a better solution please let me know. 

https://jsfiddle.net/jacob_truax/5p4n9a8m/2/

const createSprite = function() {
      imageCreated = true
      image = new Sprite(resources[images[step]].texture)
      image.width = 400;
      image.height = 300;
      image.x = left
      app.stage.addChild(image)
      step += 1
      left += 40
    }

    const removeSprite = function() {
      app.stage.removeChild(image)
      step -= 1
    }


    loader.load((loader, resources) => {
        createSprite()
      })


    nextTag.addEventListener("click", function() {
      console.log("next")
      createSprite()
    })

    backTag.addEventListener("click", function() {
      console.log("back")
      removeSprite()
    })

 

[ivan.popelyshev]

I can tell you why it happens: "image" is a global variable , it holds only last image that was added. There's no way for your function to get images that were added before it.

Its a javascript problem, so Im really cant help you because I think that people should deal with that on their own.

You'll have 1000 problems like that in the future.

Just take a cup of tea, a list of paper, a pen, read what Array and Stack is, look at PIXI.Container documentation and think about it. Stop tormenting the keyboard.

[jonforum]

you need look at basic js , splice can solve your issus with a array buffer.

Just take the indexof your image in cildren
https://www.w3schools.com/jsref/jsref_splice.asp

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/indexOf