Vanilla JavaScript：动画结束后删除跨度

Question

I use anime.js to animate headings. It adds spans to all letters to animate them individually. After the animation I like to delete this spans from the text, but deletion doesn't working. This is the code:

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

Try remove method:

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

Answer 2

complete() callback is triggered once when the animation is completed.

To delete element from DOM , Use 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();