Javascript createelement button not clickable

Question

Hello I'm building a todo app with javascript. and i started to make divs and buttons from creating with document.createElement but when i create buttons to remove lists only one button which is written in html is clickable and remove div ,other buttons that created with javascript not clickable,please can anyone tell me how to fix

let menu = document.querySelector(".bs");
let btn1 = document.querySelector(".btn");
let btn2 = document.querySelector(".btn3");

let inp = document.querySelector(".input");
let bsd = document.querySelector(".sss");
let brs  = document.querySelector(".marker");

btn1.addEventListener("click", function(){
  
  let  br = document.createElement("DIV");
  br.className = "red";
  br.innerHTML = inp.value;
  menu.appendChild(br);
  
  let ttt = document.createElement("BUTTON");
  ttt.className = "marker";
  ttt.innerHTML = "Remove";
  br.appendChild(ttt);
  
});

brs.addEventListener("click", function(){
  
  let bred =  document.querySelector(".but");
  let drp =  document.querySelector(".red");
  bred.removeChild(drp);
  
});

.red {
  background-color: dodgerblue;
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: white;
  margin: 30px 0;
}

.marker {
  background-color:white;
  border:none;
  padding:10px 20px;
}

<body>
  <div class="but">
    <div class="red">
      <button class="marker">Remove</button>
    </div>

    <div class="bs"></div>
  </div>
  
  <input type="text" class="input">
  <button class="btn">Add</button>

  <button class="btn3">Remove</button>
</body>

that

You need to add the click listener to the "remove" buttons when you create them — Gershom Maes
– Gershom Maes, Commented Jun 10, 2020 at 15:30

Gershom Maes · Accepted Answer · 2020-06-10 15:34:38Z

1

You need to add the click listener to "remove" buttons when you create them.

The following does this:

let menu = document.querySelector(".bs");
let btn1 = document.querySelector(".btn");
let btn2 = document.querySelector(".btn3");

let inp = document.querySelector(".input");
let bsd = document.querySelector(".sss");
let brs  = document.querySelector(".marker");

let addBr = () => {
  
  let br = document.createElement("DIV");
  br.className = "red";
  br.innerHTML = inp.value;
  menu.appendChild(br);
  
  let ttt = document.createElement("BUTTON");
  ttt.className = "marker";
  ttt.innerHTML = "Remove";
  br.appendChild(ttt);
  
  // This is the important change. Part of creating the .ttt element
  // is setting up its event listeners!
  ttt.addEventListener('click', () => br.remove());
  
};

btn1.addEventListener("click", addBr);

// Call `addBr` once to add the initial element
addBr();

.red {
  background-color: dodgerblue;
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: white;
  margin: 30px 0;
}

.marker {
  background-color:white;
  border:none;
  padding:10px 20px;
}

<body>
  <div class="but">
    <div class="bs"></div>
  </div>
  
  <input type="text" class="input">
  <button class="btn">Add</button>

  <button class="btn3">Remove</button>
</body>

answered Jun 10, 2020 at 15:34

Gershom Maes

8,2273 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Albenis Kërqeli Over a year ago

and a one question after adding todos how to keep todo results when browser refreshing ,any idea? i mean how to store these results?

Albenis Kërqeli Over a year ago

and why is creating one div before i click add ? i want page clean without any todo to then to create individually todo items

Gershom Maes Over a year ago

The very last line of javascript calls addBr - taking out this line will result in an initially clean page. (I only put it there to imitate your example, where an item exists initially). Storing the results so that they are not lost upon refresh is a much different question, and I recommend you post a separate question about it!

Collectives™ on Stack Overflow

Javascript createelement button not clickable

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related