在 JavaScript 动态创建的元素中添加 onclick 事件

Question

我正在使用JavaScript在用户选择组合框项目时动态向表格添加标签，但我希望这些动态添加的标签在用户单击它们时可被删除。以下是我的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吗？如何添加？我应该为擦除创建另一个函数，还是可以在这个函数中定义删除操作？ 谢谢

- Ali_dotNet

---

请查看此链接(http://www.webdeveloper.com/forum/showthread.php?t=243948)，可能会有所帮助。 - Anil Namde

Answer 1

是的，将 span 添加 onclick 事件：

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

这只是清空了标签的内容。我不确定你所说的“擦除”确切含义。 如果你想完全删除标签，请执行以下操作：

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;
    } 
};

- RightSaidFred

---

哦，谢谢。我是指删除新创建的元素，我会尝试一下。 - Ali_dotNet

谢谢，但我必须删除包含此span的行，即TR应该被删除，我该如何执行此操作？ - Ali_dotNet

谢谢Fred，它的效果正如预期。我可以在这个帖子里问另一个问题吗？我想检查重复标签，也就是说，在添加一个span时，应该检查其内容，如果已经存在，则不会发生任何事情。我需要为此创建一个新帖子吗？ - Ali_dotNet

@Ali_dotNet：那听起来像是一个独立的问题。我会开始一个新的问题。 - RightSaidFred

Answer 2

你应该使用事件委托来代替在每个创建的节点上设置事件处理程序。

这样，你可以将单个事件处理程序分配给表格周围的表格行，它处理所有行上的所有点击并删除该行。你只需要设置一次。

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

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

- Munter