仅从上一个元素中删除类

Question

我想做什么：

1. 我想点击一个div，然后在点击时添加“hide-me”类。 这有效地隐藏了div。
2. 这些div都是一个接一个地堆叠起来（想想Tinder，你在一张配置文件卡后看到一个配置文件）
3. 我希望能够点击一个按钮（“撤消”），这将只返回我之前点击过的最后一个div 。

我关心的是javascript部分！

这就是我所做的：

  HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }}}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }}}

    HTMLElement.prototype.removeClass = function(string) {
      if (!(string instanceof Array)) {
        string = string.split(' ');
      }

      for(var i = 0, len = string.length; i < len; ++i) {
        this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
      }}

var hideMe = function(){
    document.getElementById("card").toggleClass("hide-me");} 

var undo = function(){
document.getElementById("card").removeClass("hide-me");}

编辑：给我一点时间，我不小心点击了“提交”太早了。

Answer 1

您可能想要执行类似下面的示例。 您可以保留隐藏div的数组堆栈，undo函数将取消隐藏数组中的最后一项。

 HTMLElement.prototype.addClass = function(string) { if (!(string instanceof Array)) { string = string.split(' '); } for(var i = 0, len = string.length; i < len; ++i) { if (string[i] && !new RegExp('(\\\\s+|^)' + string[i] + '(\\\\s+|$)').test(this.className)) { this.className = this.className.trim() + ' ' + string[i]; }}} HTMLElement.prototype.toggleClass = function(string) { if (string) { if (new RegExp('(\\\\s+|^)' + string + '(\\\\s+|$)').test(this.className)) { this.className = this.className.replace(new RegExp('(\\\\s+|^)' + string + '(\\\\s+|$)'), ' ').trim(); } else { this.className = this.className.trim() + ' ' + string; }}} HTMLElement.prototype.removeClass = function(string) { if (!(string instanceof Array)) { string = string.split(' '); } for(var i = 0, len = string.length; i < len; ++i) { this.className = this.className.replace(new RegExp('(\\\\s+|^)' + string[i] + '(\\\\s+|$)'), ' ').trim(); }} var undoButton = document.getElementById('undo'); var hiddenStack = []; var hideMe = function(elem){ undoButton.removeClass("hide-me"); elem.parentNode.toggleClass("hide-me"); hiddenStack.push(elem.parentNode); } var undo = function(){ var elem = hiddenStack.pop() || null; if(elem) elem.removeClass("hide-me"); if(!hiddenStack.length) undoButton.addClass('hide-me'); } 

 .hide-me { display: none; } 

 <button id="undo" class="hide-me" onclick="undo()">Undo</button> <div>Profile 1 <button onclick="hideMe(this)">Hide</button></div> <div>Profile 2 <button onclick="hideMe(this)">Hide</button></div> <div>Profile 3 <button onclick="hideMe(this)">Hide</button></div> <div>Profile 4 <button onclick="hideMe(this)">Hide</button></div> <div>Profile 5 <button onclick="hideMe(this)">Hide</button></div> 

Answer 2

如果我正确理解你的问题，听起来你只需要在最后点击的元素中添加一个类并删除现有的元素

var hideMe = function(){
    document.getElementsByClassName("last-clicked").removeClass("last-clicked");
    document.getElementById("card").addClass("last-clicked");
    document.getElementById("card").toggleClass("hide-me");} 

var undo = function(){
document.getElementsByClassName("last-clicked").removeClass("hide-me");}