CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-manipulation
abolotnov
abolotnov

Reputation: 4332

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

I have a DIV with a form in it. When users submit the form and it gets successfully submitted, I replace the form with a simple "everything is good now" message:

$("#some_div").html("Yeah all good mate!");

Is there a good way to "reset" the div to its "original state" as per the HTML it has arrived with? I can only think of actually doing something like this:

//before I change the DIV
var originalState = $("#some_div").html();
//manipulate the DIV
//...
//push the state back
$("#some_div").html(originalState);

It doesn't look very elegant - I guess there is a better solution for this, no?

Upvotes: 47

Views: 114448

Answers (10)

sheischiin
sheischiin

Reputation: 1

var originalState = $("#some_div").clone(true, true);
$("#some_div").replaceWith(originalState.clone(true, true));

Upvotes: 0

hypo644
hypo644

Reputation: 3

This is my very first interaction on this site--I can't comment yet, but this is to @Fleuv's comment on @Josiah Ruddell's answer:

The default parameter for .clone() is "false", which will not clone event listeners. If you make it .clone(true) it clones the event listeners as well. I've tested it (with the rest of his answer) and it works.

w3schools jQuery clone() method

Upvotes: 0

Devraj Giri
Devraj Giri

Reputation: 21

Making call to empty function in jQuery will do it

$(".div").empty();

Upvotes: 2

Saurabh
Saurabh

Reputation: 41

In my opinion best is to use this:

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState.clone());

This way you can repeatedly use this to restore your div to original state while keeping the data in "originalState" intact. Worked for me.

Upvotes: 4

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

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

Upvotes: 93

andrhamm
andrhamm

Reputation: 4411

Somewhat more elegant?

var originalState = $("#some_div").clone();
$("#some_div").replaceWith(originalState);

Upvotes: 2

Šime Vidas
Šime Vidas

Reputation: 185933

What you're doing is not optimal. The best solution would be this:

When the form gets successfully submitted, just hide() the FORM element, and show() the message (which is initially hidden). And then, later, just show() the FORM element and hide() the message.

Upvotes: 5

Vadim
Vadim

Reputation: 17957

You can use the data attribute to save the state rather than a variable

$('#some_div').data('old-state', $('#some_div').html());
$('#some_div').html($('#some_div').data('old-state'));

Upvotes: 21

Devin Burke
Devin Burke

Reputation: 13820

You have basically three options.

  1. Remember your original markup, as you do with your originalState variable above.
  2. Use AJAX to re-request the markup. You can do this easily if you have server side code using the $.ajax() method in jQuery.
  3. Cause the page to reload.

Upvotes: 2

gen_Eric
gen_Eric

Reputation: 227270

Yeah, the way you have is the way to do it. The DOM does not save the previous states of DIVs, so you need to save that yourself.

Upvotes: 4

Related Questions