关于javascript用循环创建的标签，添加事件的问题

[zy3365265]

    var ids = 0;
    function add(){
    var f = document.getElementById("divVoteItem");
    var fd = document.createElement("fieldset");
    fd.id = ids + "";
    var ld = document.createElement("legend");
    ld.innerHTML = prompt("请输入项目标题","标题");
    if("null" == ld.innerHTML)
    {
        return;
    }
    fd.appendChild(ld);
    for(var i=0;i<3;i++){
        var br = document.createElement("p");
        var txt = document.createElement("input");
        txt.id = fd.id + "-" + i
        txt.style.width = "85%";
        var del = document.createElement("button");
        del.onclick = function DelOption(){document.getElementById(txt.id).parentNode.removeChild(document.getElementById(txt.id));del.style.display='none';};
        del.value="删除";
        fd.appendChild(txt);
        fd.appendChild(del);
        fd.appendChild(br);
        alert(txt.id);
    }
    f.appendChild(fd);
    ids++;
    }

添加事件的代码： del.onclick = function DelOption(){document.getElementById(txt.id).parentNode.removeChild(document.getElementById(txt.id));
在删除的时候不管点哪个按钮，都只会删除最后一个，这是为什么呢？

[sohighthesky]

for(var i=0;i<3;i++){
(function(i){
var br = document.createElement("p");
        var txt = document.createElement("input");
        txt.id = fd.id + "-" + i
        txt.style.width = "85%";
        var del = document.createElement("button");
        del.onclick = function DelOption(){document.getElementById(txt.id).parentNode.removeChild(document.getElementById(txt.id));del.style.display='none';};
        del.value="删除";
        fd.appendChild(txt);
        fd.appendChild(del);
        fd.appendChild(br);
        alert(txt.id);

})(i)

}

[xmliy]

闭包问题

for(var i=0;i<3;i++){
    (function (i) {
        ....
    })(i);
}

[friendly_]

del.onclick = (function DelOption(id){
			return function(){
			document.getElementById(id).parentNode.removeChild(
			document.getElementById(id));
			this.style.display = "none";
			}	
		})(txt.id);

[zy3365265]

不太明白,闭包?

[sjkof]

[Quote=引用 4 楼 zy3365265 的回复:]
不太明白,闭包?
[/Quote]

就是子函数引用父函数变量,是看这个变量的当前的值,而不是当时调用的时候的值
可以使用参数传递进子函数避免这个问题

[yixianggao]

呵呵，“闭包”就算了，MS 曾尝试过使用它，但最终还是放弃了这种方案！
俺还是喜欢拆包！

L@_@K

function IsDefined(obj) {
	return obj !== undefined;
}

function DelOption(deleteButton) {
	if (!IsDefined(deleteButton)) {
		deleteButton = this;
	}
	if (IsDefined(deleteButton.delTarget)) {
		deleteButton.delTarget.parentNode.removeChild(deleteButton.delTarget);
	}
	deleteButton.style.display = 'none';
}

var ids = 0;
function add(){
	var f = document.getElementById("divVoteItem");
	var fd = document.createElement("fieldset");
	fd.id = ids + "";
	var ld = document.createElement("legend");
	ld.innerHTML = prompt("请输入项目标题","标题");
	if("null" == ld.innerHTML)
	{
		return;
	}
	fd.appendChild(ld);
	for(var i=0;i<3;i++){
		var br = document.createElement("p");
		var txt = document.createElement("input");
		txt.id = fd.id + "-" + i
		txt.style.width = "85%";
		var del = document.createElement("button");
		// 为动态属性 delTarget 赋值！
		del.delTarget = txt;
		del.onclick = DelOption;
		del.value="删除";
		fd.appendChild(txt);
		fd.appendChild(del);
		fd.appendChild(br);
		alert(txt.id);
	}
	f.appendChild(fd);
	ids++;
}

[yixianggao]

清理一下 DelOption！

L@_@K

function DelOption(deleteButton) {
	if (!IsDefined(deleteButton)) {
		deleteButton = this;
	}

	DeleteTextbox(deleteButton);

	Disappear(deleteButton);
}

function IsDefined(obj) {
	return obj !== undefined;
}

function DeleteTextbox(btn) {
	if (IsDefined(btn.delTarget)) {
		btn.parentNode.removeChild(btn.delTarget);
	}
}

function Disappear(ele) {
	ele.style.display = 'none';
}

[michaelzhouh]

如果实在不能理解闭包，就用事件绑定

function addEventHandler(oTarget,sEventType,fnHandler){
	if(oTarget.addEventListener){
		oTarget.addEventListener(sEventType,fnHandler,false)
	}else if(oTarget.attachEvent){
		oTarget.attachEvent("on"+sEventType,fnHandler)
	}else{
		oTarget["on"+sEventType]=fnHandler
	}
};
function removeEventHandler(oTarget,sEventType,fnHandler){
	if(oTarget.removeEventListener){
		oTarget.removeEventListener(sEventType,fnHandler,false)
	}else if(oTarget.detachEvent){
		oTarget.detachEvent("on"+sEventType,fnHandler)
	}else{
		oTarget["on"+sEventType]=null
	}
};