javascript - 如何从数组中恢复删除的项目？

Question

我有一个用户卡片列表，我的任务是:

点击“撤消”按钮:将恢复上次被删除的卡片(使用数组)

问题 1:如何从我显示的卡片列表中创建数组？问题二:如何恢复上次删除的卡？(如果移除了2张卡片，“撤消”按钮将一张一张地恢复卡片)

Codepen 链接在这里 https://codepen.io/MarinaShumeiko/pen/Nbeqew?editors=1010

var root = 'https://jsonplaceholder.typicode.com';
var notificationMessage = "Oops, there are no more user cards to display";
var userIndex = 0;
var undoBtn = $("#button")
var $clearBtn = $("#clear");
var $contentArea = $("#content");


var cardTemplate =  '<div class="card" data-id="{id}"><div class="title"><div class="image"></div><div class="name">{name}</div><button onclick="removeUser({postid})" class="close"></button></div><div class="description">{body}<a href="mailto:" class="email">{email}</a></div></div>';

//- 在屏幕加载时一次加载所有卡片

 $(function() {
      $contentArea.append(renderUser);
    });

//从用户卡片创建数组

 var $cardDiv = $(".card");
 var usersCardArray = $cardDiv.toArray(); // return usersCardArray.length = 0 :(

//一次删除所有卡片

$clearBtn.click(clearUsers);

function clearUsers () {
  $contentArea.empty();
  userIndex = 0;
}

//取出一张牌

$('.card .close').on('click', removeUser);

function removeUser(postId) {
  $('[data-id="'  + postId + '"]').remove();
}

//获取用户数据

function getUser () {
      return $.ajax({ url: root + '/posts/1/comments', method: 'GET' });
    }



 function renderUser() {
      getUser().then(function (user) {
         for (var i = 0; i = user.length; i++) {
          var card = cardTemplate
            .replace('{id}', user[userIndex].id)
            .replace('{postid}', user[userIndex].id)
            .replace('{name}', user[userIndex].name)
            .replace('{body}', user[userIndex].body)
            .replace('{email}', user[userIndex].email);

            $contentArea.append(card);
            userIndex++;
        }
      })
    }

Answer 1

由于您不操作任何实际数据，仅操作 View 本身 - 您可以在删除卡上添加类 .hidden，并在撤消时删除此类。

为了跟踪已删除的用户，我添加了数组 var deletedUsers =[]。每次删除用户时，将其 ID 添加到数组并通过添加类 hidden 将其隐藏在 View 中。

撤消时 - 从 deletedUsers 中弹出用户 ID，并从该用户的卡片中删除类 hidden

https://codepen.io/anon/pen/PbXxrB