CODEWITHSUNDEEP
javascripthtmlcss
Michaelous99
Michaelous99

Reputation: 23

Delete button works only for last item


I just started working with Javascript and I am trying to make my first "Todo App".
The problem is, that my delete button which should be related to specific div is deleting only last div. To better understaing check out my code on Codepen:

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

or here:

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

What Should I change to delete proper div? Thanks, Mike.

Upvotes: 2

Views: 269

Answers (3)

Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5051

div will have the content after for loop ends. You should capture the correct div for every iteration like below, using pure javascript's immediately invoking function

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>

Upvotes: 0

KusokBanana
KusokBanana

Reputation: 345

You have to use "this" instead of "div" in click event. Something like this:

this.parentElement.remove();

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281932

The problem in your case come because of closure,you have declared all your variables using var which will belong to the functional scope and hence when you click on delete, the div that is deleted is the last div since that is what div variable points to after the for loop iteration.

Changing everything to let will work, since let is block scoped and the declaration will be limited to within the for loop

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

Upvotes: 3

Related Questions