Clear page data without reloading page?

Question

I have a simple game that produces a random number and takes a user input where the user attempts to guess the number, and the code appends each user guess to a list so they know which numbers they've guessed. There is also a "new game" (.new) link up top that the user can hit at any time to start over. Currently I have the following js:

/*--- Reset game ---*/
$(".new").click(function() {
   location.reload();
});

While this works, I would prefer to change the operation so that the page doesn't need to refresh, but rather resets the code to the beginning (ie produces a new random number, clears the list items, etc.)

Not sure how to go about doing this. Any Ideas?

Answer 1

Have a function that builds the random number and the call it every time new game is clicked. So for example have a function called generateRandomNumber() and use it the following way:

/*--- Reset game ---*/
$(".new").click(function() {
    generateRandomNumber(); //Function to start everything from the beginning
});

Answer 2

You could have a list, and when user checks their guess, add an element to the list. For the new, just get all the li elements from the list and remove them.

Two buttons, new and check , and two click events. I've made a quick sketch:

https://codepen.io/anon/pen/oxVKJB

You could complete it with the random number generation, validation and stuff.