Jquery: how to release all event handlers, dom changes ?

Question

Is there a way to reset the current page ? free all event handlers, remove any CSS toggled by Jquery, in simpler words, restoring the page to the original state without refreshing ?

Answer 1

refresh/reload page. There's no other way. I commented to the OP's post.

But thinking of it, I think there's a way.

On the css part, animations are being done on the style attribute. Removing style attribute reset the element from the animation. But take note that if you were using style attribute to style your element, that will be erased too.

On the binding event, you may want to bind namespaced events. For example, binding click would look something like this,

$('#someID').bind('click.toBeRemove', function(){...})

So that removing events would be easy as $('*').unbind('.toBeRemove'). Leaving the other original events (in this example the click event).

When using plugins, use those that has .destroy() method which removes it functionality and style on the element.

But this is not 100% sure working. Just a theory. There's NO easy way doing this. - Yes! there's no $(window).reset() that would reset the page without reloading.

Answer 2

Well, here's a solution - capture a clone of the body as it is before you've done anything to it, then when you need the reset, replace the entire body with this clone.

var original = $('body').clone();

$('#reset').click(function() {
    $('body').replaceWith(original);
}); 

Of course, this won't undo any changes you made elsewhere, such as in the head, but it's still slightly better than the other options you've got, right?

See: http://jsfiddle.net/uevrM/

Edit: Just realized, this also won't kill off any event handlers created with live or delegate. So again, no, this isn't 100% clean.