CODEWITHSUNDEEP
javascript
Frozendawn
Frozendawn

Reputation: 123

I can't make button add a class to newly created <li> element

I'm trying to make a simple to-do list. I've managed to create the button but, I can't make it delete the item when click. In the console it says:

li is not defined

let getText = document.querySelector(".text");
let getUl = document.querySelector(".list");
let dBtn = document.createElement("button");

function addItem() {
  let newLi = document.createElement("li");
  newLi.innerHTML = getText.value;
  newLi.appendChild(dBtn);
  getUl.appendChild(newLi);
  getText.value = "";
}

dBtn.appendChild(document.createTextNode("X"));

dBtn.addEventListener("click", function() {
  li.classList.add("delete");
})
* {
  padding: 0;
  margin: 0;
  text-align: center;
}

.button-add {
  height: 19px;
  width: 40px;
  border-radius: 5px;
}

.delete {
  display: none;
}

.text {
  border-radius: 5px;
}
<h1>to-do list</h1>
<input type="text" class="text" placeholder="Item to add ...">
<button type="button" class="button-add" onclick="addItem()">Add</button><br>
<ul class="list">

</ul>

Upvotes: 2

Views: 332

Answers (2)

Mamun
Mamun

Reputation: 68933

Adding the class delete to li will not delete the item when you click.

The current code is adding the button only to the first li created. I believe you want to add button with each li. If so, you have to add the button functionality when you create the li.

Replace the click handler function code with:

this.parentNode.remove();

This will remove the current li.

let getText = document.querySelector(".text");
let getUl = document.querySelector(".list");

function addItem (){
  let newLi = document.createElement("li");
  let dBtn = document.createElement("button");
  dBtn.addEventListener("click", removeLi);
  newLi.innerHTML=getText.value;
  dBtn.appendChild(document.createTextNode("X"));
  newLi.appendChild(dBtn);
  getUl.appendChild(newLi);
  getText.value="";
}

function removeLi()  {
  this.parentNode.remove();
}
* {
  padding: 0;
  margin: 0;
  text-align: center;
}

.button-add {
  height: 19px;
  width: 40px;
  border-radius: 5px;
}

.delete{
  display: none;
}

.text {
  border-radius: 5px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title></title>
  </head>
  <body>
    <h1>to-do list</h1>
    <input type="text" class="text" placeholder="Item to add ...">
    <button type="button" class="button-add" onclick="addItem()">Add</button><br>
    <ul class="list">

    </ul>

    <script src="main.js"></script>
  </body>
</html>

Upvotes: 1

Gabbr Issimo
Gabbr Issimo

Reputation: 111

Because addItem() is not defined. You are declaring it after the element.

try to remove onclick="" from the button e give it the onclick in js

replace function addItem(){ .. } like this:

document.getElementsByClassName('button-add')[0].onclick = function (){
  let newLi = document.createElement("li");
  newLi.innerHTML=getText.value;
  newLi.appendChild(dBtn);
  getUl.appendChild(newLi);
  getText.value="";
}

for delete 

dBtn.addEventListener("click",function ()  {
  this.parentNode.classList.add("delete");
})

https://jsfiddle.net/dj1eya95/3/

Upvotes: 0

Related Questions