How to append "delete button" to EVERY list item that is newly created in JS?

Question

Shopping List exercise using JS DOM. My full code: https://codepen.io/lil_a/pen/BaQKvqZ?editors=0110

I have to add a new "Delete" button to every newly created list item. I managed to do that, but it only appends the button I created to the last list item, not other newly added items too. How to do it so there's a new delete button for every list item?

I've searched through similar questions, but generally, the codes were different from mine and I'd have to redo it all. Is there a way to do it with my code?

HTML

    <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul id = "list">
        <li>Notebook<button class="btn">Delete</button></li><br>
        <li>Jello<button class="btn">Delete</button></li><br>
        <li>Spinach<button class="btn">Delete</button></li><br>
        <li>Rice<button class="btn">Delete</button></li><br>
        <li>Birthday Cake<button class="btn">Delete</button></li><br>
        <li>Candles<button class="btn">Delete</button></li><br>
    </ul>

JS

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li).addEventListener("click", toggleList); 
    //append and toggle on and off new list items
    input.value = "";
    ul>li.appendChild(deleteButton).addEventListener("click", removeItem); 
    //append "delete button" to newly added "li"
}

var elements = document.getElementsByClassName("btn");
    for (var i = 0; i < elements.length; i++){
    elements[i].addEventListener("click", removeItem);
}
  
function removeItem(){
this.parentNode.remove();
}  

var deleteButton = document.createElement("button");
deleteButton.setAttribute("class", "btn");
deleteButton.appendChild(document.createTextNode("Delete"));

Answer 1

Hi You just need to move the delete button code inside your createListElement() function

See I have attached your code see below...

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var list = document.querySelectorAll('ul>li');



function inputLength() {
    return input.value.length;
}

function createListElement() {
  /*Your delete button code MOVED HERE*/
  var deleteButton = document.createElement("button");
  deleteButton.setAttribute("class", "btn");
  deleteButton.appendChild(document.createTextNode("Delete"));
  /*end*/
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li).addEventListener("click", toggleList); //append and toggle on and off new list items
    input.value = "";
  ul>li.appendChild(deleteButton).addEventListener("click", removeItem); //append "delete button" to newly added "li"
}


function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}



button.addEventListener("click", addListAfterClick);

input.addEventListener("keypress", addListAfterKeypress);


//Toggle list item on and off when clicked on 
var list = document.querySelectorAll('ul>li');
for (var i = 0; i < list.length; i++) {
list[i].addEventListener("click", toggleList);
}
function toggleList() {
  event.target.classList.toggle("done"); //or this.classList.toggle("done");
}

                      
//Delete list item by clicking on the delete button next to it
var elements = document.getElementsByClassName("btn");
for (var i = 0; i < elements.length; i++){
  elements[i].addEventListener("click", removeItem);
}
  
function removeItem(){
this.parentNode.remove();
}       

//3. BONUS: When adding a new list item, it automatically adds the delete button next to it hint: be sure to check if new items are clickable too!

.coolTitle {
  text-align: center;
  font-family: 'Oswald', Helvetica, sans-serif;
  font-size: 40px;
  transform: skewY(-10deg);
  letter-spacing: 4px;
  word-spacing: -8px;
  color: tomato;
  text-shadow: 
    -1px -1px 0 firebrick,
    -2px -2px 0 firebrick,
    -3px -3px 0 firebrick,
    -4px -4px 0 firebrick,
    -5px -5px 0 firebrick,
    -6px -6px 0 firebrick,
    -7px -7px 0 firebrick,
    -8px -8px 0 firebrick,
    -30px 20px 40px dimgrey;
}

.done {
  text-decoration: line-through;
}

.btn {
  display: inline;
  border-color: white;
  margin-left: 15px;
  border-radius: 5px;
}

 <h1>Shopping List</h1>
    <p id="first">Get it done today</p>
    <input id="userinput" type="text" placeholder="enter items">
    <button id="enter">Enter</button>
    <ul id = "list">
        <li>Notebook<button class="btn">Delete</button></li><br>
        <li>Jello<button class="btn">Delete</button></li><br>
        <li>Spinach<button class="btn">Delete</button></li><br>
        <li>Rice<button class="btn">Delete</button></li><br>
        <li>Birthday Cake<button class="btn">Delete</button></li><br>
        <li>Candles<button class="btn">Delete</button></li><br>
    </ul>

Answer 2

This is the code I am using based on the above - noticed some of it didn't seem necessary to get the desired results. Like this because seems simpler and straightforward:

var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
var list = document.querySelectorAll('ul>li');

function inputLength() {
    return input.value.length;
}

function createListElement() {
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(input.value));
    ul.appendChild(li);
    input.value = "";

    // Delete Button
    var deleteButton = document.createElement("button");
    deleteButton.setAttribute("class", "btn")
    deleteButton.appendChild(document.createTextNode(" Remove "));
    ul>li.appendChild(deleteButton).addEventListener("click", removeItem);

    // Strike-through
    ul.appendChild(li).addEventListener("click", toggleList);
}

function addListAfterClick() {
    if (inputLength() > 0) {
        createListElement();
    }
}

function addListAfterKeypress(event) {
    if (inputLength() > 0 && event.keyCode === 13) {
        createListElement();
    }
}

function removeItem() {
    this.parentNode.remove();
}```

function toggleList () {
    this.classList.toggle("done");
}

button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);