0

我创建了多个 div，其中class="extra". 然后我为每个 div 添加删除按钮，以便分别删除每个 div。所以我的代码是：

  var exr = document.getElementsByClassName("extra");           
    for(var i = 0 ;i<exr.length;i++){         
        var delbt = document.createElement("button");
        delbt.className="floatbutton_3 font_b"
        delbt.innerHTML="delete";
        exr[i].appendChild(delbt);
        delbt.onclick=  function(i){ return function(){ exr[i].parentNode.removeChild(exr[i]) } }(i);
   }

问题是，按钮无法移除它应该移除的按钮。似乎在最后一次删除之后，索引发生了变化。如何避免这种情况发生？

谢谢！

4

7 回答 7

0

该代码看起来应该可以工作，但前提是您不添加或删除元素。这就是你正在做的事情。

有一个更简单、更可靠的解决方案：您可以this在事件处理程序内部使用来引用当前元素。

delbt.onclick = function() {
    var div = this.parentNode; // you want to remove the div, not the button
    div.parentNode.removeChild(div);
};

我建议阅读quirksmode.org 上关于事件处理的优秀文章，尤其是关于传统事件处理的文章（因为你正在使用它）。

于 2013-06-18T12:18:53.150 回答
0

做这个...

var exr = document.getElementsByClassName("extra");           
for(var i = 0 ;i<inserter.length;i++){         
    var delbt = document.createElement("button");
    delbt.className="floatbutton_3 font_b"
    delbt.innerHTML="delete";
    exr[i].appendChild(delbt);
    delbt.index = i;
    delbt.onclick=  function(i){ var me = this; return function(){ exr[me.index].parentNode.removeChild(exr[i])    } }(i);
}
于 2013-06-18T12:19:15.243 回答
0

this在函数内使用onclick来引用被点击的按钮——因此通过替换excr[i]为this.parentNode，您的代码应该按预期执行。

于 2013-06-18T12:19:35.330 回答
0

我将添加一个 jQuery 解决方案：

$('.extra').append(function() {
    return $('<button />', {'class':'floatbutton_3 font_b', html:'delete'});
});

$('.floatbutton_3').on('click', function() {
    $(this).closest('div').remove();
});

小提琴

于 2013-06-18T12:21:17.287 回答
0

由于getElementsByClassName()返回一个活集，你可以先做一个浅拷贝：

var exr = [].slice.call(document.getElementsByClassName("extra"), 0);
于 2013-06-18T12:22:22.917 回答
0

getElementsByClassName()返回一个 HTMLCollection。这是一个随着底层结构变化而变化的实时列表。因此，即使您没有主动从列表中删除元素，当您删除相应的 HTML 元素时，它们仍会自动从列表中删除。

通过传递i给匿名函数，您可以修复索引。因此，每当您单击第三个删除按钮时，它都会尝试删除列表中的第三个元素。但是如果你已经删除了第一个和第二个元素，列表也会被修改。因此，您的第三个按钮将由列表中的第一项表示，但它会尝试找到第三个。

为避免此问题，您可以将完整元素传递给匿名函数，而不仅仅是索引：

for(var i = 0 ;i<exr.length;i++){         
    var delbt = document.createElement("button");
    delbt.className="floatbutton_3 font_b"
    delbt.innerHTML="delete";
    exr[i].appendChild(delbt);
    delbt.onclick = function(el){ return function(){ el.parentNode.removeChild(el) } }(exr[i]);
}
于 2013-06-18T12:23:26.000 回答
0

您可以在 click 事件上使用 currentTarget 。

这只会删除单击按钮的父 div。

var exr = document.getElementsByClassName("extra");
for(var i = 0 ;i<exr.length;i++){
    var delbt = document.createElement("button");
    delbt.className="floatbutton_3 font_b"
    delbt.innerHTML="delete";
    exr[i].appendChild(delbt);
    delbt.onclick=  function( event ){
        event.currentTarget.parentElement.remove();
    }
}
于 2013-06-18T12:24:33.567 回答