javascript - 删除按钮仅适用于最后一项

Question

我刚开始使用 Javascript，我正在尝试制作我的第一个“Todo 应用程序”。
问题是，我应该与特定 div 相关的删除按钮只删除了最后一个 div。为了更好地理解，请查看我在 Codepen 上的代码:

https://codepen.io/anon/pen/QVPxmG

或在这里:

     var books = ["Bang-1","Bang-2","Bang-3","Bang-4"];
     var wrapper = document.querySelector(".wrapper");
     var element_div = document.querySelector(".element_div");

     var load_button = document.querySelector(".load");
     load_button.addEventListener("click", function(){
      for(var x=0;x<books.length;x++){
        var div = document.createElement("div");
        div.setAttribute("class","element_div " + "element_div"+x);
        wrapper.appendChild(div);

        var element = document.createElement("p");
        div.appendChild(element);
        element.setAttribute("class", "element"+x);
        element.innerHTML = books[x];

        var del = document.createElement("button");
        del.setAttribute("class", "delete"+x);
        div.appendChild(del);
        del.innerHTML = 'Delete';

        del.addEventListener("click", function(){
          div.remove();
        },false);
       }
      },false);

        var clear = document.querySelector(".clear");
        clear.addEventListener("click", function(){
          wrapper.innerHTML = "";
        },false);

我应该更改什么以删除适当的 div？谢谢，迈克。

Answer 1

你的案例中的问题是因为关闭，你已经使用 var 声明了所有变量，这将属于功能范围，因此当你点击删除时，被删除的 div 是最后一个 div，因为那是 div 变量在 for 循环迭代后指向的内容。

将所有内容更改为 let 将起作用，因为 let 是 block 作用域并且声明将被限制在 for 循环中

for(let x=0;x<books.length;x++){
    let div = document.createElement("div");
    div.setAttribute("class","element_div " + "element_div"+x);
    wrapper.appendChild(div);

    let element = document.createElement("p");
    div.appendChild(element);
    element.setAttribute("class", "element"+x);
    element.innerHTML = books[x];

    let del = document.createElement("button");
    del.setAttribute("class", "delete"+x);
    div.appendChild(del);
    del.innerHTML = 'Delete';

    del.addEventListener("click", function(){
      div.remove();
    },false);

  }
},false);

Working codepen