Как отменить изменение класса и сохранить данные класса в таблице html

Question

Я хотел бы undo, только если его класс стираем (can be erased класс style1)

В моем коде я мог бы undo, но я не мог различить guish им. Кажется, class должно храниться в некоторых массивах.

Если у кого-то есть идеи, пожалуйста, дайте мне знать.

var $ = jQuery;
var style ='';
let clicked=[];

$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data().style;
})

 $('.click_td').on('click', function(){
  $(this).removeClass('style1 style2').addClass(style)
   let clickedID=$(this).attr('id');
   clicked.push(clickedID);
   console.log(clicked);
 })
 

  $("#undo").on('click',function() {
    if(clicked.length) {
      let lastClicked = clicked.pop();
      $(`td#${lastClicked}`).removeClass();
    }
  })

.style1 {
  background: rgb(255, 0, 255);
  border-radius: 5px;
}

.style2 {
  background: rgb(0, 255, 255);
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="click_td" id=0>color</td>
    <td class="click_td" id=1>color 2</td>
    <td class="click_td" id=2>color 3</td>
    <td class="click_td" id=3>color 4</td>
    <td class="click_td" id=4>color 5</td>
  </tr>
</table>
<button class="click_btn" data-style="style1">can be erased</button>
<button class="click_btn" data-style="style2">cannot be erased</button>
<button id="undo">undo</button>

Answer 1

Я немного изменил вашу функцию отмены, я проверяю, имеет ли последний нажатый элемент класс style1, и если элемент получил этот класс, его следует удалить.

  $("#undo").on('click',function() {
    if(clicked.length) {
      let lastClicked = clicked.pop();
      if ($('#' + lastClicked).hasClass('style1')) {
         $('#' + lastClicked).removeClass('style1')
      }
    }

fiddle здесь: https://jsfiddle.net/cznfyrsx/1/

надеюсь, что это может ответить на ваш вопрос:)