当用户选择组合框项目时,我正在为我的表格动态添加标签,但我希望这些动态添加的标签在用户点击它们时可以删除,这是我的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吗?我怎么能这样做?我应该创建另一个用于擦除的功能,还是可以在此功能中定义删除操作 感谢
答案 0 :(得分:7)
是的,将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;
}
};
答案 1 :(得分:2)
您应该使用事件委派,而不是在您创建的每个节点上设置事件处理程序。
通过这种方式,您可以为表行周围的表分配单个事件处理程序,处理所有行的所有点击并删除该行。你只设置一次。
table.onclick = function (e) {
var target = e.target || window.event.srcElement;
while (target.nodeName !== 'TR') {
target = target.parentNode;
}
target.parentNode.reamoveChild(target);
}