Jquery javascript - How can I let users 'undo' their modifications?

Question

Hi, i have a basic jquery app that allows a user to edit and manipulate some lists on a page. What I would like to do is have a button 'restore original list' that the user can press to undo his modifications.

What is the best way to do this? I was thinking of just copying the DOM from the list down, and pasting it in a hidden element someplace else on the page. Is this the best way to do this?

I also noticed that jquery has a .data() function which I could use if I converted the data to an array and stored it this way. What are the advantages and disadvantages?

Also, I'm open to any suggestions people have if there is some method I haven't thought of.

Thanks for your help!

Answer 1

Bill,

Phil Haack posted an article about a jQuery plugin he's working on called jquery.undoable. I haven't looked at it much, but he wrote it to emulate Netflix's DVD queue.

His post: http://haacked.com/archive/2010/01/01/jquery-undoable-plugin.aspx

The project on github: http://github.com/Haacked/jquery.undoable

Answer 2

Since what's your looking for sounds more like a "restore to original" instead of a step-by-step undo, I'd go with your idea of copying the dom elements/html, but instead of saving them somewhere on the page as hidden, just keep them in a variable. You might have to deal with event bindings after you paste, but that's fairly straightforward.