javascript - 问题 removeChild of many elements

Question

我有一个函数，它使用 animate 类(使用 css3 动画)创建 div，然后在 webKitAnimationEnd 触发时删除它。当我有多个 div 时，问题就来了:该函数只删除第一个，但与其他 div 一起失败，导致 Uncaught TypeError: Cannot call method 'removeChild' of null。

function msg(x) {
    cnt = document.getElementsByClassName("animate").length;
    div = document.createElement("div");
    div.textContent = x;
    div.className = "animate";
    div.style.bottom = (cnt) * 30 + "px";
    document.getElementById("wrapper").appendChild(div);
    div.addEventListener("webkitAnimationEnd", function () {
        div.parentNode.removeChild(div);
    });
}

这是一个 jsfiddle，我的代码重现了这个问题:http://jsfiddle.net/p5HR3/3/

我怀疑函数在有很多 div 时不知道要删除哪个 div。我能做什么？提前致谢。

Answer 1

将事件处理程序代码更改为:

this.parentNode.removeChild(this);

在那种情况下this将指向正确的 div，它触发了一个事件。

附注:onClick="for(i=0;i<10;i++){msg('message n.'+i);}" - 这不好。不要使用内联 Javascript。