transitionend事件中获取不到父元素

目前项目的需求是, 点击关注按钮, 关注人数(item.attentionNum)+1, 同时弹出+1的动画, 动画结束后删除动画元素

HTML

<div class="guanzhunum"><span>{{item.attentionNum}}人</span>关注</div>

JS

function followPlus(){
    //获取`.guanzhunum`的div
    var parent = document.querySelectorAll('div.guanzhunum')[index]; 
    //创建+1的动画的span
    var span = document.createElement('span'); 
    //给span定位
    span.setAttribute('style', 'display: block; position: absolute; left: 0; top: 0; color: red; font-size: bold; transition: all 0.5s ease; ')
    //span的内容为+1
    span.innerHTML = '+1'
    //附加到父元素上
    parent.appendChild(span); 
    //应用动画效果
    setTimeout(function(){
        span.style.opacity = '0'; 
        span.style.top = '-0.5rem'; 
    }, 0); 
    //监听span的transitionend事件, 在动画结束后移除span元素
    span.addEventListener('transitionend', function(){
        this.parentNode.removeChild(this); 
    })
}; 

现在问题是在transitionend事件触发后报错
bundle.js:1093 Uncaught TypeError: Cannot read property 'removeChild' of null
没有获取到this.parentNode元素

而在eventListener里加个debugger, 单步执行就没问题

求解!!