две вещи в одной функции и одну из них нужно ждать

Question

Я хочу, чтобы в одной функции выполнялись две вещи, сначала я хочу, чтобы масштабирование стало 0,5, а затем удалил его, но не работает

$(document).on('click', '.remove', function() {
  $(this).parent().css({
    'transform': 'scale(0.5)'
  });
  $(this).parent().remove();
})

.planarea div {
  width: 225px;
  height: 220px;
  transition: .1s;
  background: #ffff00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="planarea">
  <div>
    <a class="remove">x</a>
    <h1>asd</h1>
    <textarea></textarea>
  </div>

Answer 1

Используйте метод jQuery .one(), чтобы прикрепить одноразовый обработчик события transitionend. Обработчик удалит элемент после завершения перехода.

$(document).on('click', '.remove', function() {  
  $(this).parent().one('transitionend', function() {
    $(this).remove();
  })
  .css({
    'transform': 'scale(0.5)'
  });
});

.planarea div {
  width: 225 px;
  height: 220 px;
  transition: transform .1s;
  background: #ffff00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="planarea">
  <div>
    <a class="remove">x</a>
    <h1>asd</h1>
    <textarea></textarea>
  </div>
</div>