Undo dom changes in JS
dom, html, javascript, jquery
Solution
Your question is very useful. I don’t know what’s the optimal way of handling this situation, but I do know that there is Command Design Pattern that could work in this case. With Command Design Pattern you can undo events that have been saved in your program. To my understanding the trick to use Command Design Pattern is that you need to have functions that do the opposite thing when you need to undo something. For example if you need to undo add function result, you need to have subtract function. For draw function you need to have clear/erase function. Here is JavaScript example.
Problem
I am writing a custom HTML editor. User can edit an entire HTML content and the changes will be updated in DOM. We have an option to undo all the changes. Logic: Clone an entire container before making change and apply it again. Disadvantages: Storing a huge variable in js memory. And applying the changes again a dom will repaint everything. Is there any way to achieve the same?.