Question

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

或此处：

     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声明了所有变量，这些变量将属于功能范围，因此，当您单击delete时，被删除的div是自这就是div变量在for循环迭代之后指向的内容。

将所有内容更改为let都可以，因为let是块作用域的，并且声明将被限制在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

Answer 2

在点击事件中，您必须使用“ this”而不是“ div”。像这样：

this.parentElement.remove();

Answer 3

在div循环结束之后，

for将具有内容。您应该使用纯javascript的立即调用功能为以下每次迭代捕获正确的div，

var books = ["Bang-1", "Bang-2", "Bang-3", "Bang-4"];
var wrapper = document.querySelector(".wrapper");
var load_button = document.querySelector(".load");

load_button.addEventListener("click", function() {
  for (var x = 0; x < books.length; x++) {
    var div = document.createElement("div");
    (function(div) { // Immediately invoking function - IIFE
      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);

    })(div);

  }
}, false);

var clear = document.querySelector(".clear");
clear.addEventListener("click", function() {
  wrapper.innerHTML = "";
}, false);

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 300px;
  height: 250px;
  position: relative;
}

.container .wrapper {
  width: 300px;
  height: 200px;
  padding: 10px;
  background: aqua;
  position: relative;
}

.container .wrapper .element_div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.container .load {
  position: absolute;
  bottom: 0px;
}

.container .clear {
  position: absolute;
  bottom: 0px;
  right: 10px;
}

<div class="container">
  <div class="wrapper" id="wrapper">
    <div class="element_div">
      <p class="element">Bang</p>
      <button class="delete">Delete</button>
    </div>
  </div>
  <button class="load">LOAD</button>
  <button class="clear">CLLEAR</button>
</div>

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

3 个答案: