Как отменить предыдущий ввод в html таблицах

Question

В примерах я могу изменить цвет, щелкая каждую ячейку.

Я хотел бы отменить previous input, нажав кнопку cancel.

Есть ли способ сделать это? Если кто-то испытал такой вопрос. пожалуйста, дайте мне знать.

Спасибо

$(function() {
  $("td").click(function() {
    $(this).addClass("red");
  });
});

.red{
  background-color: red;
}


td {
  padding: 5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

<button>cancel</button>

Answer 1

Здесь вы go:

$(function() {
  let clicked = [];
  $("td").click(function() {
    let clickedID = $(this).attr('id');
    clicked.push(clickedID);
    $(this).addClass("red");
  });
  $("#btnCancel").on('click',() => {
    if(clicked.length) {
      let lastClicked = clicked.pop();
      $(`td#${lastClicked}`).removeClass("red");
    }
  })
});

.red{
  background-color: red;
}


td {
  padding: 5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <td id="1">1</td>
  <td id="2">2</td>
  <td id="3">3</td>
  <td id="4">4</td>
  <td id="5">5</td>
  <td id="6">6</td>
  <td id="7">7</td>
  <td id="8">8</td>
  <td id="9">9</td>
  <td id="10">10</td>
</table>

<button id="btnCancel">cancel</button>

Answer 2

var lastel = null;
$(function() {
  $("td").click(function() {
    $(this).addClass("red");
    lastel = $(this);
  });

  $('button').click(function() {
    if (lastel !== null)
        lastel.removeClass('red');
  });
});

Answer 3

Вы можете сделать это, отслеживая историю:

const history = [];

function addToHistory(e) {
  const index = e.target.id;
  if (history.indexOf(index) < 0) history.push(index);
  color();
}

function undo() {
  history.pop();
  color();
}

function color() {
  const cells = document.getElementsByTagName("td");
  for (let i = 0; i < cells.length; i++) {
    cells[i].classList.remove("red");
  }
  history.forEach(index => {
    document.getElementById(index).className = "red";
  });
}

.red{
  background-color: red;
}


td {
  padding: 5px
}

<table>
  <td onclick="addToHistory(event)" id="1">1</td>
  <td onclick="addToHistory(event)" id="2">2</td>
  <td onclick="addToHistory(event)" id="3">3</td>
  <td onclick="addToHistory(event)" id="4">4</td>
  <td onclick="addToHistory(event)" id="5">5</td>
  <td onclick="addToHistory(event)" id="6">6</td>
  <td onclick="addToHistory(event)" id="7">7</td>
  <td onclick="addToHistory(event)" id="8">8</td>
  <td onclick="addToHistory(event)" id="9">9</td>
  <td onclick="addToHistory(event)" id="10">10</td>
</table>

<button onclick="undo()">cancel</button>