jQuery undo with multiple remove();

Question

How do I get the function to always remember the sequence of the last removed .items so that I may undo as many items that were removed before the undo timeout occurs?

I want to be able to quickly remove all .items and then press undo to replace all three, one by one where pressing the undo button replaces the last removed item.

Currently I can only replace the last removed .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

As I said, you can save them in an array. When you remove it, push it in the array. When you want to undo something, pop it out.

And by the way, as @LexJacobs said, don't remove it. just hide it.

Not sure if this is what you want. But I'm trying to structure this out.

 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>