$(document).ready(function()
{
    $('#remove').click(function()
    {
        $('.test').remove();
    });
});

<script src=".1.1/jquery.min.js"></script>
<div class="test-wraper">
    <div class="test">
        test
    </div>
    <div class="test2">
        test2
    </div>
</div>
<button id='remove'>Remove</button>
<button id='back'>Back</button>

$(document).ready(function()
{
    $('#remove').click(function()
    {
        $('.test').remove();
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-wraper">
    <div class="test">
        test
    </div>
    <div class="test2">
        test2
    </div>
</div>
<button id='remove'>Remove</button>
<button id='back'>Back</button>

I want to restore my .test div using jQuery, after I've removed it. How do I achieve this?

• javascript
• html
• css

• 4 When you remove it, it's gone. Why not just move it somewhere else and hide it? – apokryfos Commented Oct 20, 2016 at 12:54
• 1 use show hide instead of removing it. – priya_singh Commented Oct 20, 2016 at 12:54
• or save it to a variable before you remove it: var $test = $('.test'); – Jonas Grumann Commented Oct 20, 2016 at 12:55
• 1 if you need it gone from DOM use detach() and save a reference, else use hide and show like @TimSpeckhals as shown – Tschallacka Commented Oct 20, 2016 at 12:58

3 Answers 3

I think you are looking for .hide(); and .show();

$(document).ready(function(){
  $('#remove').click(function(){
    $('.test').hide();
  });
  $('#back').click(function(){
    $('.test').show();
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-wraper">
<div class="test">
test
</div>
<div class="test2">
test2
</div>
</div>
<button id='remove'>Remove</button>
<button id='back'>Back</button>

Actually, you cannot restore any HTML tags that are removed by jquery function. Instead, to remove the elements without removing data and events you can use .detach() function.

You can create a variable and before removing it store the dom in it.

$(document).ready(function(){
var cacheDom = "";
  $('#remove').click(function(){
        cacheDom = $('.test'); //storing the value in dom
    $('.test').remove();
  });
 $('#add').click(function(){
        $('.test3').append(cacheDom); // appending it back
  });
});

$(document).ready(function(){
var cacheDom = "";
  $('#remove').click(function(){
		 if ($('.test').length > 0) {
          cacheDom = $('.test');
          $('.test').remove();
        }
  });
 $('#add').click(function(){
		$('.test3').append(cacheDom);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-wraper">
<div class="test">
test
</div>
<div class="test2">
test2
</div>
</div>
<div class="test3"></div>
<button id='remove'>Remove</button>
<button id='add'>Add Back</button>

DEMO