Как удалить класс, нажав на элемент

Question

В моем фрагменте есть 3 кнопки, я хотел бы функционировать erase кнопка.

После нажатия кнопки erase, я бы хотел Removeclass by clicking each cells one by one.

Есть ли способ?

Спасибо

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);
 })
 

.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 class="erase">erase</button>

Answer 1

Вы можете попробовать добавить / удалить класс, на основе которого вы можете удалить классы стилей:

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

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

$('.click_td').on('click', function(){
  $(this).addClass(style);
  let clickedID=$(this).attr('id');
  if($('.erase').hasClass('erase-clicked')){
    $(this).removeClass('style1 style2')
  }  
});

$('.erase').click(function(){
  $(this).addClass('erase-clicked');
});

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

.style2 {
  background: rgb(255, 0, 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 class="erase">erase</button>

Answer 2

Вместо этого можно попробовать этот код ...

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

    $('.erase').on('click', function () {
        $('.click_td').on('click', function () {
            $(this).removeClass('style1 style2');`enter code here`
        })
    })

ОБЪЯСНЕНИЕ: при нажатии любой из кнопок «.click_btn» активируется указанный стиль на основе стиля данных и * 1007. * class ...

при щелчке по стиранию активируются все ячейки для индивидуального удаления класса стиля при нажатии