如何恢复被jQuery的remove方法移除的HTML元素

Question

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

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

我想使用jQuery恢复我已删除的.test div。我该如何实现？

- Rohit

---

移除它后，就不复存在了。为什么不把它移到别处并隐藏起来呢？ - apokryfos

请使用显示隐藏的方式，而非删除它。 - priya_singh

在删除之前，请将已转换的文本保存到变量中：var $test = $('.test'); - Jonas Grumann

如果你需要从DOM中移除它，请使用detach()并保存一个引用，否则像@TimSpeckhals所示使用hide和show。 - Tschallacka

Answer 1

我认为你正在寻找.hide();和.show();。

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

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

- Sainan

---

我必须删除而不是隐藏和显示，但还是感谢您的帮助。 - Rohit

@Rohit 为什么你需要移除它？ - Sainan

它在滚动我的页面时引起了问题，移除后隐藏显示功能无法正常工作，现在可以平稳滚动。 - Rohit

Answer 2

实际上，通过 jQuery 函数删除的 HTML 标签是无法恢复的。但是，你可以使用 .detach() 函数来删除元素而不影响数据和事件。

- Bala Chandar

---

...如果您没有存储到这些DOM节点的引用，那么该函数将无法使用。相反... - Tschallacka

Answer 3

你可以创建一个变量，在删除之前将dom存储在其中。

$(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.com/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>

演示

- brk

---

使用detach()并将其放在一行中，而不是两行中以删除，同时，如果您点击两次删除，则会丢失引用。 - Tschallacka