jquery найти кнопку в строке и изменить ее класс

Question

У меня есть таблица и кнопки, и все кнопки генерируются с помощью al oop.

<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>

Я хочу найти, какую кнопку нажимаю, а затем изменить ее класс.

теперь в моем jquery скрипте

$( document ).on( 'click', '.remove-connetion', function (e) {
    e.preventDefault();
 $('td').find('.fa fa-trash').closest('button').removeClass('btn-danger');
 $('td').find('.fa fa-trash').closest('button').addClass('btn-secondary');

});

это не меняет класс. Спасибо за помощь

Answer 1

Используйте this вместо этого внутри обратного вызова, чтобы получить текущую нажатую кнопку:

$(document).on('click', '.remove-connetion', function(e) {
  e.preventDefault();
  var clicked = $(this);
  setTimeout( function() {
     clicked.removeClass('btn-danger');
     clicked.addClass('btn-secondary');
  }, 1000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>


<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
   <i class="fa fa-trash"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
   <i class="fa fa-trash"></i>
</button>
<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
   <i class="fa fa-trash"></i>
</button>

Answer 2

Вы можете сделать это так:

$( document ).on( 'click', '.remove-connetion', function (e) {
  e.preventDefault();
  e.target.classList.remove('btn-danger');
  e.target.classList.add('btn-secondary');
});

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

<button type="button" class="btn btn-danger btn-sm remove-connetion" name="button">
<i class="fa fa-trash"></i>
</button>