I have a variable called grid which contains variables called elements.

On click of a button I'd like to remove the grid and replace it with a fresh one. This is done via an event listener, a function and an if statement.

However I'm getting a console error telling me "grid is not defined".

Can anyone help?

//Create preset variables
let body = document.querySelector('body');
let content = document.querySelector('.content');
let numberOfSquares = 16;
let randomColorValue = '';
let colorShade = 10;
let buttonClicks = 0;
/* let grid = document.createElement('div'); */

//Create variable called container that contains a div
let container = document.createElement('div');
container.classList.add('container');
body.appendChild(container);

// Add a button &  position to top of screen
let button = document.createElement('button');
button.textContent = "Refresh!";
button.classList.add('refresh-button');
content.appendChild(button);
button.addEventListener('click', refreshGrid);

squaresInGrid();

function squaresInGrid() {
    if (buttonClicks > 0) {
        console.log(buttonClicks);
        container.removeChild(grid);
    }

    for (i = 0; i < numberOfSquares; ++i) {
        let grid = document.createElement('div');
        grid.classList.add('grid');
        container.appendChild(grid);

         let element = document.createElement('div');
         element.classList.add('grid-item');
         element.addEventListener('mouseenter', function mouseEnterFunctions() {
             randomColor();
             hoverStyle();
            --colorShade;
            element.removeEventListener('mouseenter', mouseEnterFunctions);
         });

        function hoverStyle() {
            element.style.backgroundColor = '#'+randomColorValue;
            element.style.opacity = (colorShade / 10); 
        }

        function randomColor() {
            randomColorValue = Math.floor(Math.random()*16777215).toString(16);
        }

        grid.appendChild(element);                
    }
} 

//Function to be called on button click removing existing grid and replacing with a new one
function refreshGrid() {
    ++buttonClicks;
    numberOfSquares = prompt("How many squares would you like? (Maximum 100)");
    colorShade = 0;
    squaresInGrid();
}