用detach()模拟撤销；

Question

撤消按钮仅附加最后一个分离的.item，并且不允许在上次删除的项目之外附加分离的项目。这样做的目的是删除尽可能多的项目，并在每次单击撤消按钮时连续恢复它们。

​

$(document).ready(function() {
  var cacheDom = "";
  $('.remove').click(function() {
    if ($('.item').length > 0) {
      cacheDom = $('.item');
      $(this).closest('.item').detach();
    }
  });
  $('#undo').click(function() {
    $('.list').append(cacheDom);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    Item 1
    <button class='remove'>Remove</button>
  </div>
  <div class="item">
    Item 2
    <button class='remove'>Remove</button>
  </div>
  <div class="item">
    Item 3
    <button class='remove'>Remove</button>
  </div>
</div>
<button id='undo'>Undo</button>

​

Answer 1

您可以保留已删除元素的数组，并从数组中的第一个元素开始恢复它们。

​

$(document).ready(function() {
  var removedItems = [];
  
  $('.remove').click(function() {
    var removeItem = $(this).closest('.item').detach();
    removedItems.push(removeItem);
  });
  
  $('#undo').click(function() {
    if (removedItems.length) {
      var restoreItem = removedItems.shift();
      $('.list').append(restoreItem);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <div class="item">
    Item 1
    <button class='remove'>Remove</button>
  </div>
  <div class="item">
    Item 2
    <button class='remove'>Remove</button>
  </div>
  <div class="item">
    Item 3
    <button class='remove'>Remove</button>
  </div>
</div>
<button id='undo'>Undo</button>

​