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

Question

    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));
在删除的时候不管点哪个按钮，都只会删除最后一个，这是为什么呢？

Answer 1

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

Answer 2

闭包问题
for(var i=0;i<3;i++){
    (function (i) {
        ....
    })(i);
}

Answer 3

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

Answer 4

呵呵，“闭包”就算了，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++;
}

Answer 5

清理一下 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';
}

Answer 6

如果实在不能理解闭包，就用事件绑定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
}
};