How to reset elements to their original state, after a chain of manipulations?

Question

After a bunch of animating, adding classes and setting css styles. is there an easy way to reset an element to be back in its original server delivered state?

Answer 1

I don't think it's possible to revert the state.
But you could load the page again with ajax and replace everything with the fresh copy

Answer 2

jQuery sets its manipulations using the inline style attribute, so just set that to ''.

$('#someDiv').attr('style','');

This assumes there were no inline style attributes set on the element coming from the server. Better to use style sheets if so.

If the element must come from the server with style attributes set, then I suppose you could cache the value in a variable, and reset it when needed.

   // Cache original attributes
var originalAttributes = $('#someDiv').attr('style');


   // Reset from original
$('#someDiv').attr('style',originalAttributes);

---

EDIT:

If needed, you could send your elements from the server with custom attributes to remember the original class attribute, for example.

<div class="myClass" originalClass="myClass">...</div>

Then you can reference the original anytime you need.

You could even find all elements that have the originalClass attribute like this.

var $elementsWithOriginal = $('[originalClass]');

or find elements where the class attribute has been modified from the original.

var $modifiedFromOriginal = $('[originalClass]').filter(function() {
        return $(this).attr('class') != $(this).attr('originalClass');
    });