In my main page I have a simple form. I have made it so I when the user clicks the "submit" button I send the form data to the server side and also just after submit I remove the form using Jquery. However, I would like to have a way so that when I click a button after geting the form removed it would appear again exactly as it was before geting removed.

When I click the form submit button I don't want the form to be invisible; I want the form to be removed from the page. Do I have to make a new form everytime I remove it to be exactly as the removed one or is there a way to get it back when clicking the "recovering" button?

Just in case, I am using JADE for rendering some other stuff... I am not sure if it is needed for this. Sorry for any mistakes, I am quite newbie in programming. I can give more information if needed.

In my main page I have a simple form. I have made it so I when the user clicks the "submit" button I send the form data to the server side and also just after submit I remove the form using Jquery. However, I would like to have a way so that when I click a button after geting the form removed it would appear again exactly as it was before geting removed.

When I click the form submit button I don't want the form to be invisible; I want the form to be removed from the page. Do I have to make a new form everytime I remove it to be exactly as the removed one or is there a way to get it back when clicking the "recovering" button?

Just in case, I am using JADE for rendering some other stuff... I am not sure if it is needed for this. Sorry for any mistakes, I am quite newbie in programming. I can give more information if needed.

• javascript
• jquery
• forms

• 1 One way to do it would be to clone the form before deleting it. When you want it back you can just say $(parent).append(formClone). Or you can just set display: none instead of deleting it I guess... – Angel Politis Commented Sep 24, 2016 at 16:43
• 1 Or instead of removing it you could append it to a newly created node not in the document, then append it back to the document later. – Sebastian Simon Commented Sep 24, 2016 at 16:45
• 1 Just like @ZakariaAcharki said. – Aravind Suresh Thakidayil Commented Sep 24, 2016 at 16:47
• @AngelPolitis You can lose information by cloning. – Spencer Wieczorek Commented Sep 24, 2016 at 16:52
• 1 @AngelPolitis Cloning (with .cloneNode()) and replacing element with a clone is a good way to remove all event handlers for example. – Spencer Wieczorek Commented Sep 24, 2016 at 17:01

4 Answers 4

You can use .is() to check if element is in document, .detach()

var div = $("div");
$("button").click(function() {
  if (div.is("button + div")) div.detach();
  else div.insertAfter(this)
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>toggle div</button>
<div>abc</div>

Just hide the form when you submit, then show it when you want by clicking recover button :

$('#my-submit').on('click', function(e){
  e.preventDefault();
  
  $('#my-form').hide(); //Hide the form
})

$('#recover').on('click', function(){
  $('#my-form').show(); //Show the form
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
  First name : <input name="f_name"/>
  <br>
  Last name : <input name="l_name"/>
  <br>
  <input type="submit" value='Submit' id="my-submit"/>
</form>
<br>
<button type="button" id='recover'>Recover</button>

Hope this helps.

Or you could also clone the form before submit using .clone(true) (The true indicating whether event handlers should be copied along with the elements. As of jQuery 1.4, element data will be copied as well) , then show it when user click on recuver button :

var my_form="";

$('#my-submit').on('click', function(e){
  e.preventDefault();
  
  my_form = $('#my-form').clone(true); //Save the form
  $('#my-form').remove();
})

$('#recover').on('click', function(){
  $('body').prepend(my_form); //Show the form
})

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
  First name : <input name="f_name"/>
  <br>
  Last name : <input name="l_name"/>
  <br>
  <input type="submit" value='Submit' id="my-submit"/>
</form>
<br>
<button type="button" id='recover'>Recover</button>

Just save the element to a JS variable before removing the element, e. g.:

var form = document.getElementById('example-form');
form.parentNode.removeChild(form); // The form is removed.

Then you will be able to insert the element into document again, e. g.:

someElement.appendChild(form); // The form is restored.

It seems that you would like to show / hide particular element.

IMO, the toggle() would be the best option.

$('div').toggle();

Toggle Documentation

If you want to remove it from DOM, you can use remove / detach as well.

$( "p" ).detach(); or $( "p" ).remove();

var p;
$('button').click(function(){
  if ( p ) {
    p.appendTo( "body" );
    p = null;
  } else {
    p = $( "p" ).remove();
  }
});

p
{
  color: red; 
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Button</button>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>