Reset content of div

Question

I have two divs with some 'deafult' content. When I click on link it changes html of that div. So I what to reset div html to initial content.

Example:

<a id="click1" href="#">Add</a><a id="click2" href="#">Reset</a>

<div id="click1_div">
    <p>some text</p>
</div>

So when I click on Add jQuery will append some html, and when I click on Reset it should get back old html div content.

Any idea?

Can you please add jQuery code, which you have tried. – stanze Apr 27 '15 at 10:07 — stanze, Apr 27 '15 at 10:07

score 5 · Accepted Answer · answered Apr 27 '15 at 10:08

5

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

answered Apr 27 '15 at 10:08

Pedro José Cardoso

99
7

3

Also, take a look at Vadim's answer on http://stackoverflow.com/questions/5557641/how-can-i-reset-div-to-its-original-state-after-it-has-been-modified-by-java . It uses data attributes to save the initial value. – Pedro José Cardoso Apr 27 '15 at 10:17

score 4 · Answer 2 · answered Apr 27 '15 at 10:14

example: http://jsfiddle.net/WebJedi/4Lz43nco/1/

$(document).ready(function() {
    var isChanged = false,
        $clickDiv = $('#click1_div'),
        defaultText;

    $('#click1').on('click', function(e) {
        e.preventDefault();

        if(!isChanged) {
            defaultText = $clickDiv.html();
            isChanged = true;
            $clickDiv.html('<strong>CHANGE TEXT</strong>');
        } else {
            alert('div is already changed');
        }
    });

    $('#click2').on('click', function(e) {
        e.preventDefault();

        if(isChanged) {
            $clickDiv.html(defaultText);
            isChanged = false;
        } else {
            alert('no change detected');
        }
    });
});

score 3 · Answer 3 · answered Apr 27 '15 at 10:19

$(document).ready(function(){
    var $container = $('#container'),
        $content = $container.html(),
        $newContent = '<br> Some content';

    $('#add').on('click', function(){
        $container.html($newContent);
    });
    $('#reset').on('click', function(){
        $container.html($content)
    });
});

http://codepen.io/mbrillaud/pen/doPRBL

score 1 · Answer 4 · answered Apr 27 '15 at 10:11

I would add the original html to a variable to be used when the reset button is clicked. Something like:

//save original html of div
var originalHtml = $('#click1_div').html();

//when click on reset button, restore html
$('#click2').on('click', function(e){
    e.preventDefault();
    $('#click1_div').html(originalHtml);
});

score 1 · Answer 5 · answered Apr 27 '15 at 10:13

Try this, .html() will fetch you old html content save it to a variable and same .html() method will replace the old content with new content:

$(document).ready(function(){
  var old="";
  $("#click1").click(function(){
    old=$("#click1_div").html();
    $("#click1_div").html("asdfad");
  });

  $("#click2").click(function(){
    $("#click1_div").html(old);
  });
});

DEMO FIDDLE

score 1 · Answer 6 · answered Apr 27 '15 at 11:16

Add this function somewhere on your page (preferably in the )

function clearBox(elementID)
{
    document.getElementById(elementID).innerHTML = "";
}

Then add the button on click event

<button onclick="clearBox('cart_item')" />

In JQuery (for reference)

If you prefer JQuery you could do:

$("#cart_item").html("");

score 0 · Answer 7 · answered Apr 27 '15 at 10:18

you cannot reset the content without storing the initial value. You can do somthing like this:

var initialContent;

$("#click1").click(function() {
    initialContent = $("#click1_div").html();

    // replace content here
}

And on reset you can write it back to the div:

$("#click2").click(function() {
    $("#click1_div").html(initialContent);
}

Reset content of div

7 Answers7