将onclick事件添加到javascript动态创建的元素中

Question

当用户选择组合框项目时，我正在动态地向我的表添加标签，但是我希望这些动态添加的标签在用户点击它们时可以擦除，这是我的javascript函数：

    function OnSelectedIndexChange()

{
    if (document.getElementById('cmbDestinationUser').selectedIndex != 0) {
        var spanTag = document.createElement("span");
        spanTag.id = "span1";
        var e = document.getElementById("cmbDestinationUser");
        var strUser = e.options[e.selectedIndex].text;
        spanTag.innerHTML = strUser;
        var TR = document.createElement('tr');
        var TD = document.createElement('td');
        TD.appendChild(spanTag);
        TR.appendChild(TD);
        document.getElementById('tblReceivers').appendChild(TR);
    }
    document.getElementById('cmbDestinationUser').selectedIndex = 0;
}

我应该在spantag上添加onclick吗？ 我怎么能这样做？ 我应该创建另一个用于擦除的功能，还是可以在此功能中定义删除操作谢谢

Answer 1

是的，将onclick添加到span ：

spanTag.onclick = function() {
    this.innerHTML = '';
};

这只是清除了span的内容。 我不确定你的“擦除”究竟是什么意思。

如果要完全删除span ，请执行以下操作：

spanTag.onclick = function() {
    this.parentNode.removeChild( this );
};

---

要删除该行，请执行以下操作：

spanTag.onclick = function() {
    var el = this;
    while( (el = el.parentNode) && el.nodeName.toLowerCase() !== 'tr' );

    if( el )
        el.parentNode.removeChild( el );
};

或者让它更清晰一些：

spanTag.onclick = function() {
    var el = this.parentNode;
    while( el ) {
       if( el.nodeName.toLowerCase() === 'tr' ) {
           el.parentNode.removeChild( el );
           break;
       }
       el = el.parentNode;
    } 
};

Answer 2

您应该使用事件委派，而不是在您创建的每个节点上设置事件处理程序。

这样，您可以为表行周围的表分配单个事件处理程序，处理所有行的所有单击并删除该行。 你只设置一次。

table.onclick = function (e) {
    var target = e.target || window.event.srcElement;

    while (target.nodeName !== 'TR') {
        target = target.parentNode;
    }
    target.parentNode.reamoveChild(target);
}