Javascript 在递归中删除当前父节点

我创建了多个div

class=“extra”

。然后我向每个div添加delete按钮，以便分别删除每个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);
   }

var exr=document.getElementsByClassName（“额外”）；
对于（var i=0；i代码看起来应该可以工作，但前提是不添加或删除元素。这就是您正在做的

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

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


我建议在quirksmode.org上阅读，特别是关于（因为这就是您正在使用的）的内容。
这样做

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

var exr=document.getElementsByClassName（“额外”）；
对于（var i=0；i在
onclick
函数中使用
this
引用单击的按钮-因此，通过将
excr[i]
替换为
this.parentNode
，您的代码应该按预期执行。
我将添加一个jQuery解决方案：

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

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

$（'.extra'）.append（函数（）{
返回$（“”，{'class'：'floatbutton_3 font_b'，html:'delete'}）；
});
$（'.floatbutton_3'）。在（'单击'，函数（）上）{
$（this）.closest（'div'）.remove（）；
});

由于
GetElementsByCassName（）
返回一个活动集，因此可以先进行浅拷贝：

var exr = [].slice.call(document.getElementsByClassName("extra"), 0);

getElementsByClassName（）
返回一个HTMLCollection。这是一个实时列表，在基础结构更改时会发生更改。因此，即使您没有主动从列表中删除元素，当您删除相应的HTML元素时，它们仍然会自动从列表中删除

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

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

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

for（var i=0；i您可以在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();
    }
}

var exr=document.getElementsByClassName（“额外”）；
对于（var i=0；iWhy如果不使用jQuery，它会被标记为jQuery？您打算使用jQuery吗？您在访问
exr
时，正在迭代
inserter
，修改节点列表会更改索引。以相反的方式迭代。向下尝试，例如
for（var i=exr.length；i>0；i--）{
@Felix Kling我的意思是jquery也可以进行修改，什么是插入器？“问题是在函数中，
I
是引用单击事件的参数。”不，这是一种生活。再看看代码。奇怪……这是编辑吗？在任何情况下，技术要点仍然是：
i
不是要寻找的东西（而且它令人困惑，因为这也是范围更高的迭代器的索引）。同时，
此
将是可靠的。这是不正确的。在您的代码中，
此
指的是
窗口
而不是DOM元素。哎呀……对不起……这里混合了jQuery和常规JS。我的不好……所以您可以说
var me=（事件| | window.event）.target；
而不是
var me=this；
，它也不起作用，与jQuery无关。这是一种生命，即立即执行函数。该函数返回的函数是事件处理程序，其中
this
将引用元素，并且
event
将可用。