How to stop a Phaser game and remove it from a page?

Question

I have a single webpage that I want to be able to run three JavaScript games, sequentially. I start one with

//jQuery to start a game
$(document).ready(() => {
  //When the logo image is clicked
  $("#logo").click(() => {
    //Get the archery game
    $.getScript('archery.js', () => {
      //Start it
      startArchGame();
      //Remove the image from the HTML doc
      $("#logo").remove();
    });
  })
})

Then, inside archery.js, once a condition is met, the following code is executed

$.getScript('skateboarding.js', () => {
  startSkateGame();
});
game.destroy();

The game.destroy(); stops the game from running in Phaser 3, but the next game is just loaded below the first one, so you can't see it. How can I fix this? Is it possible to delete the first script I got entirely?

Answer 1

I was able to solve this issue within the Phaser framework.

I changed game.destroy() to game.destroy(true, false). The first argument of the destroy method, true, says that I want to remove the game from the canvas element of the page when I destroy the game. The second argument, false, says to NOT remove all of Phaser and its plugins for the page. I set this to false because I want to create another game in Phaser on the page after I destroy my first one.