jQuery undo具有多個remove（）;

Question

我如何獲得該功能以始終記住上次removed .items的順序，以便我可以undo在undo timeout發生之前刪除的所有項目？

我希望能夠快速remove所有.items ，然后按undo來全部替換所有三個.items ，其中一個按undo按鈕替換上一個刪除的項目。

目前，我只能替換最后一個刪除的.item 。

 var undo = false; var remove; var timeout; $(document).ready(function() { /*DELETE*/ $('body').on('click', '.fa-times', function() { if ($('.item').hasClass("temp_deleted")) { $('.item.temp_deleted').remove(); } remove = $(this).parent().parent(); var undo_time = 10000; remove.animate({ height: "0px" }, 200, function() { $(this).addClass('temp_deleted').hide(); }); function_undo(remove, undo); //undo $('.undo').addClass('active'); clearTimeout(timeout); timeout = setTimeout(function() { $('.undo').removeClass('active'); if (undo === false) { $('.item.temp_deleted').remove(); } }, undo_time); }); /*UNDO*/ $('.undo div').click(function() { undo = true; function_undo(remove, undo); $(this).parent().removeClass('active'); }); }); function function_undo(remove, undo) { if (undo == true) { remove.css('height', 'auto'); remove.show(); remove.removeClass('temp_deleted'); } } 

 .item { width: 100px; height: 50px; border: 2px solid } .actions span.fa-times:hover { color: #fe4444; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list"> <div class="item"> <div class="actions"> <span class="fa fa-times"></span> </div> </div> <div class="item"> <div class="actions"> <span class="fa fa-times"></span> </div> </div> <div class="item"> <div class="actions"> <span class="fa fa-times"></span> </div> </div> </div> </div> <div class="undo"> <div> <span class="fa fa-undo"></span> Undo </div> </div> 

Answer 1

正如我所說，您可以將它們保存在一個數組中。 刪除時， push其push陣列。 當您要撤消某些操作時，將其pop 。

順便說一句，就像@LexJacobs所說的，不要remove它。 hide

不確定這是否是您想要的。 但我正在嘗試將其結構化。

 var undo = false; var timeout; var arr = []; $(document).ready(function() { /*DELETE*/ $('body').on('click', '.fa-times', function() { if ($('.item').hasClass("temp_deleted")) { $('.item.temp_deleted').hide(); } remove = $(this).parent().parent(); var undo_time = 10000; remove.animate({ height: "0px" }, 200, function() { $(this).addClass('temp_deleted').hide(); }); function_undo(remove, undo); //undo $('.undo').addClass('active'); clearTimeout(timeout); timeout = setTimeout(function() { $('.undo').removeClass('active'); if (undo === false) { $('.item.temp_deleted').hide(); } }, undo_time); arr.push(remove); }); /*UNDO*/ $('.undo div').click(function() { undo = true; var remove = arr.pop(); function_undo(remove, undo); $(this).parent().removeClass('active'); }); }); function function_undo(remove, undo) { if (undo == true) { remove.css('height', 'auto'); remove.show(); remove.removeClass('temp_deleted'); } } 

 .item { width: 100px; height: 50px; border: 2px solid } .actions span.fa-times:hover { color: #fe4444; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="list"> <div class="item"> <div class="actions"> <span class="fa fa-times"></span> 1 </div> </div> <div class="item"> <div class="actions"> <span class="fa fa-times"></span> 2 </div> </div> <div class="item"> <div class="actions"> <span class="fa fa-times"></span> 3 </div> </div> </div> </div> <div class="undo"> <div> <span class="fa fa-undo"></span> Undo </div> </div>