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

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");