How to reset DOM after manipulation?

Question

My page contains some small wizard which I built using jQuery.

I would like to offer the user to restart/reset the wizard and start it from the beginning level.

Answer 1

The only way to start over without refreshing the page is for you to manually return the DOM to the state it was in when the page loaded and to restore any javascript state too. You would either have to record/remember the initial state so you could go back to it or keep track of all your incremental changes so you could go back there too.

If you really want to start over, what's wrong with a refresh?

Answer 2

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

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

(Note that passing true to clone() also clones element data and event handlers, which might prove handy in your case.)

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

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

Answer 3

Similar to the above, here's what I ended up doing. I stored the entire jQuery doc contents in a bootup() function (and ran it). The initial contents of the body was stored in an originalDOM variable. Then within I had a playAgain function that would set the contents of the body to that originalDOM, and run the entire jQuery contents again by calling the bootup() function. This would all be triggered by clicking on a button of class ".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 that helps for anyone looking for something similar, and happy to hear feedback if there's anything I could've improved on!