jQuery addClass example

Change class name on click in jQuery

HTML

<div class="delbut" id="товар1">удалить товар 1</div>
<div class="delbut" id="товар2">удалить товар 2</div>
<div class="delbut" id="товар3">удалить товар 3</div>

CSS

.delbut {
  cursor: default;
  display: inline-block;
  color: white;
  text-decoration: none;
  padding: .5em 2em;
  outline: none;
  border-width: 2px 0;
  border-style: solid none;
  border-color: #FDBE33 #000 #D77206;
  border-radius: 6px;
  background: linear-gradient(#F3AE0F, #E38916) #E38916;
  transition: 0.2s;
} 
.delbut:hover { background: linear-gradient(#f5ae00, #f59500) #f5ae00; }
.delbut:active { background: linear-gradient(#f59500, #f5ae00) #f59500; }

JavaScript

$('.delbut').on('click', function() {
    // получаем id товара
    const productId = this.id;
    
    window.alert("id товара для удаления: " + productId);

    // отправляем ajax
    //$.ajax({
    //  url: '/delproduct',
    //  type: 'POST',
    //  data: {id: productId},
    //  ...
    //});  
});