How to "Reset" <Div> to Its Original State After It Has Been Modified by JavaScript

How can I reset div to its original state after it has been modified by JavaScript?

I would clone the element, instead of saving the content. Then use replaceWith to restore it:

var divClone = $("#some_div").clone(); // Do this on $(document).ready(function() { ... })

$("#some_div").html("Yeah all good mate!"); // Change the content temporarily

// Use this command if you want to keep divClone as a copy of "#some_div"
$("#some_div").replaceWith(divClone.clone()); // Restore element with a copy of divClone

// Any changes to "#some_div" after this point will affect the value of divClone
$("#some_div").replaceWith(divClone); // Restore element with divClone itself

Reset content of div

Perhaps you should save the old html before setting the new one.

var old_html = $("#click1_div").html();

And then use the old_html value to reset the innerhtml:

$("#click1_div").html(old_html);

How to reset a value to its original state if changed

using .data is perfect for that. look no further

update - with some code directions

Assuming you want to have this done for many input fields and not just one I am assuming each input+edit+reset are contained in a single parent

<div>    
    <input class="someClassName" type="text" value="100" /> 
    <a class="EditLink" href="#">Edit</a>
    <a class="ResetLink" href="#">Reset</a>
</div>

and in your init script block

$(".EditLink").click(
             function() {
                $(this).parent().children("INPUT").data("val",
                  $(this).parent().children("INPUT").val());
             });
$(".ResetLink").click(
             function() {
                $(this).parent().children("INPUT").val(
                  $(this).parent().children("INPUT").data("val"));
             });

I didn't test it but it should work

Replace Div and Reset Div (Jquery)

This is a basic solution with javascript (no jQuery) hope it helps you and solves the problem.

const initDiv = document.getElementById('init');    const classList = ["first" , "second" ,"third"];    const inputClassList = ['one' ,'two' ,'three'];    let linkIndex = -1;    initDiv.addEventListener('click' , showInput);
    function showInput(e){               let linkIndex = classList.indexOf(e.target.classList[0]);        if(linkIndex >= 0){            const inputDiv = document.getElementById(inputClassList[linkIndex]);            const inputButton = inputDiv.children[0];                        inputDiv.classList.remove('noDisplay');;            initDiv.classList.add('noDisplay');
            inputButton.addEventListener('click' ,function(){                initDiv.classList.remove('noDisplay');                inputDiv.classList.add('noDisplay');            })
        }    }

#wrapper{background-color: #999;}
.noDisplay{display:none;}
.inputCss{/*set here the css properties you don't want the input to enherit from wrapper div*/}

<div id="wrapper" class="toggled">        <div class="container" id="init">          <div class="link-1">            <a class="first" href="#">1st Action</a>          </div>          <div class="link-2">            <a class="second" href="#">2nd Action</a>          </div>          <div class="link-3">            <a class="third" href="#">3rd Action</a>          </div>        </div>                <div class="container noDisplay inputCss" id="one">        <input type="button" value="Go Back" id="home1"/> One      </div>            <div class="container noDisplay inputCss" id="two">        <input type="button" value="Go Back" id="home2"/> Two      </div>            <div class="container noDisplay inputCss" id="three">        <input type="button" value="Go Back" id="home3"/> Three        </div>      </div>

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

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');
    });

How to reset div back to pre-AJAX response state, after search field is cleared?

Store the div inner html somewhere safe and then restore it.

With plain javascript:

// store original html
var originalHtml = div.innerHTML;

// restore it
div.innerHTML = originalHtml;

or with jquery like you use it:

// store original html
var originalHtml = $('#resultsbox').html();

// restore it
$('#resultsbox').html(originalHtml);