Ваниль JavaScript: удаление отрезков после окончания анимации

Question

Я использую аниме. js для анимации заголовков. Это добавляет пены ко всем буквам, чтобы оживить их индивидуально. После анимации мне нравится удалять эти фрагменты из текста, но удаление не работает. Это код:

function theAnimation() {
  var textWrapper = document.querySelector('.pt-animation');
  textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

  anime.timeline({
    loop: false,
    delay: 500
  })
  .add({
    targets: '.pt-animation .letter',
    translateX: [40,0],
    translateZ: 0,
    opacity: [0,1],
    easing: "easeOutExpo",
    duration: 1200,
    delay: (el, i) => 500 + 30 * i
  })
}

function deleteSpan(){
  var letter = document.getElementsByClassName("letter");
  delete letter;
}

theAnimation();
deleteSpan();

Answer 1

complete() обратный вызов запускается один раз после завершения анимации.

Чтобы удалить элемент из DOM, используйте elem.parentNode.removeChild(elem);

function theAnimation() {
  var textWrapper = document.querySelector('.pt-animation');
  textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

  anime.timeline({
      loop: false,
      delay: 500
    })
    .add({
      targets: '.pt-animation .letter',
      translateX: [40, 0],
      translateZ: 0,
      opacity: [0, 1],
      easing: "easeOutExpo",
      duration: 1200,
      delay: (el, i) => 500 + 30 * i,
      complete: deleteSpan
    });
}

function deleteSpan() {
  var letter = document.getElementsByClassName("letter");
  for (var i = 0, len = letter.length; i < len; i++) {
    letter[i].parentNode.removeChild(letter[i]);
  }
}

theAnimation();

Answer 2

Попробуйте удалить метод:

var letter = document.getElementsByClassName("letter")[0];
letter.remove();