How to reset the DOM after manipulation?

Question

My page contains a small wizard that I created using jQuery.

I would suggest the user to restart / reset the wizard and start it from the entry level.

Is there a way to do this without refreshing the page?

Answer 1

One way to achieve this would be to clone () the wizard's element tree in its original state and save it in a global variable or in a data document:

$(document).data("initialWizard", $("#yourWizard").clone(true)); 

(Note that passing true to clone() also clones the item data and event handlers, which may be convenient in your case.)

Then, when you want to restore the master to its original state, you can do:

 $(document).data("initialWizard").replaceAll("#yourWizard"); 

Answer 2

The only way to get started without refreshing the page is to manually return the DOM to the state it was in when the page was loaded and restore any javascript state. You will need to record / remember the initial state so that you can return to it or track all of your incremental changes so that you can return there too.

If you really want to start all over again, what happened to the update?

Answer 3

As above, here is what I ended up doing. I saved the entire contents of the jQuery document in the bootup () function (and ran it). The original body content was stored in the original DOM variable. Then inside I had a playAgain function that would set the body contents to this original DOM and run all the jQuery contents again by calling the bootup () function. All this will be triggered by pressing the class button ".startover".

 bootup(); var bootup = function(){$(document).ready(function(){ var originalDOM=document.body.innerHTML; //jQuery lines of code here var playAgain = function(){ $(".startover").click(function(){ document.body.innerHTML = originalDOM; bootup(); }); }; playAgain(); });}; 

Hope this helps anyone who is looking for something like this and would love to hear feedback if there is anything that I could improve on!