Как отменить регистрацию события (removeclass) в календаре как html таблиц

Question

Когда я пытаюсь создать календарь как HTML таблицы, я хотел бы знать, как удалить их класс.

Мой желаемый результат -

• Когда я нажимаю 1 или 2 или 3, тогда будут удалены только классы 1, 2, 3.
• Когда я нажимаю 10 или 11 или 12, тогда будут удалены только классы 10, 11, 12.

Есть ли необходимость ссылаться на элемент next или previous?

Есть ли какой-нибудь изощренный способ добиться этого?

Спасибо

Рабочая демоверсия:

$(function() {
  $("td").click(function() {
    $(this).closest('tr').find('.yellow').removeClass('yellow');
  });
});

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  cursor: pointer;
}
div {padding: 5px;}
table {border-collapse: collapse;}
.yellow {background-color: yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>


<script>
  let html = ''
  html += '<table>';
  let i = 0;
  for (let w = 0; w < 3; w++) {
    html += '<tr>';
    for (let d = 0; d < 10; d++) {
      i = i + 1;
      html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
    }
    html += '</tr>';
  }
  html += '</table>'
  document.querySelector('#calendar').innerHTML = html;

  const arr = [1, 2, 3, 6, 7, 10, 11, 19, 20, 21, 12, 26, 27, 28].map(String);


  $("td")
    .filter(function() {
      return arr.includes($(this).text());
    })
    .addClass('yellow');
</script>

Answer 1

Вы можете сделать что-то вроде этого:

 $(function() {
  $("td").click(function() { 
   $(this).removeClass('yellow');    
  });
});
 
 let html = ''
  html += '<table>';
  let i = 0;
  for (let w = 0; w < 3; w++) {
    html += '<tr>';
    for (let d = 0; d < 10; d++) {
      i = i + 1;
      html += '<td data-layer=0>' + '<div>' + i + '</div>' + '</td>'
    }
    html += '</tr>';
  }
  html += '</table>'
  document.querySelector('#calendar').innerHTML = html;

  const arr = [1, 2, 3, 6, 7, 10, 11, 19, 20, 21, 12, 26, 27, 28].map(String);


  $("td")
    .filter(function() {
      return arr.includes($(this).text());
    })
    .addClass('yellow');

td {
  transition-duration: 0.5s;
  border: solid black 1px;
  cursor: pointer;
}
div {padding: 5px;}
table {border-collapse: collapse;}
.yellow {background-color: yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id=calendar></div>