Question

在我的主页面中，我有一个简单的表格。我已经做到了这一点，当用户点击“提交”按钮时，我将表单数据发送到服务器端，并且在提交后我也使用Jquery删除表单。但是，我希望有一种方法可以让我在删除表单后点击一个按钮，它会再次出现，就像删除之前一样。

当我点击表单提交按钮时，我不希望表单不可见;我希望从页面中删除表单。我每次删除它时都必须创建一个新表单，与删除它一样，还是有办法在单击“恢复”按钮时将其恢复？

以防万一，我使用JADE渲染其他东西......我不确定是否需要它。对不起任何错误，我是编程新手。如果需要，我可以提供更多信息。

Answer 1

您可以使用.is()检查元素是否在document，.detach()

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需在提交时隐藏表单，然后点击recover按钮即可随时显示该表单：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/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>

＆＃13;

希望这有帮助。

或者你也可以在使用.clone(true)提交之前克隆表单（ true指示事件处理程序是否应该与元素一起复制。从jQuery 1.4开始，元素数据将被复制以及），然后在用户点击recuver按钮时显示：

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/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>

＆＃13;

Answer 3

在删除元素之前，只需将元素保存到JS变量即可。 G：

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

然后您将能够再次将元素插入文档中，例如： G：

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

Answer 4

您似乎希望show / hide特定元素。

IMO，toggle()将是最佳选择。

$('div').toggle();

Toggle Documentation

如果要从DOM中删除它，也可以使用remove / detach。

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

＆＃13;

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

＆＃13;

p
{
  color: red; 
}

＆＃13;

<script src="https://ajax.googleapis.com/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>

＆＃13;

删除了HTML元素。什么是最简单的方法？

4 个答案: