How to delete <li> from <ul> with button that has not been created yet

I am trying to make a ToDo app. With every item added to the list (ul), a delete button is created as well which I want to be able to use to delete that specific li from the ul. I can't figure out how to do this because those buttons are not created yet when the DOM is loaded. How would I do this? My code:

let addBtn = document.getElementById('addBtn');
let delBtn = document.getElementsByClassName('delBtn');

let id = 0;

addBtn.onclick = () => {
    let input = document.getElementById('input');
    let item = input.value;
    if (item === '') {
        alert('No text was entered...');
    }
    else {
        let ul = document.getElementById('list');
        let li = document.createElement('li');
        id  ;
        li.id = `toDo_${id}`;
        li.className = 'toDoLine';
        li.innerHTML = `${item} <button  id="delBtn_${id}">\u00D7</button>`;
        ul.appendChild(li);
        input.value = '';
        input.focus();
    }
}

@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@300&family=Bebas Neue&family=Montserrat&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
}

h2 {
    margin: 10px;
}

.outerBox {
    border: 2px solid black;
    border-radius: 10px;
    width: 550px;
    background-color: yellowgreen;
    text-align: center;
}

.innerBox {
    border: 2px solid black;
    border-radius: 10px;
    height: 42px;
    width: 500px;
    background-color: #ebebeb;
    margin: auto;
    margin-bottom: 10px;
}

.input {
    border: none;
    border-radius: 10px;
    width: 400px;
    height: 40px;
    outline: none;
    background-color: #ebebeb;
}

.addBtn {
    font-weight: bold;
    border: 2px solid black;
    border-radius: 8px;
    background-color: lightgray;
    height: 25px;
    width: 90px;
}

.addBtn:hover, .addBtn:focus {
    background-color: gray;
}

ul {
    list-style: none;
    width: 500px;
    margin: auto;
    padding-left: 0pt
  }

li {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #ffff99;
    height: 22px;
    width: 450px;
    border: 2px solid black;
    border-radius: 10px;
    padding: 6px;
    text-align: left;
    font-size: small;
}

li:last-child {
    margin-bottom: 10px;
}

.delBtn {
    border: 1px solid gray;
    background-color: #ebebeb;
    font-weight: bold;
    float: right;
    height: 22px;
    border-radius: 5px;
}

.delBtn:hover {
    background-color: #ff3333;
    color: white;
}

<!DOCTYPE html>
<html lang="en-EN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>ToDo App</title>
</head>
<body>
    <div >
        <h2>MY TODO LIST:</h2>
            <div >
                <input type="text" id="input"  placeholder="Enter activity (max. 50 character)" maxlength="50"><button id="addBtn" >Toevoegen!</button>
            </div>
        <ul id="list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

You could create the button just like you create the li, and append it to the li.

let button = document.createElement('button');
        
button.onclick = function() {
  li.remove();
}
        
button.className = "delBtn";
button.id = `delBtn_${id}`;
button.innerText = "\u00D7";

li.appendChild(button);

let addBtn = document.getElementById('addBtn');
let delBtn = document.getElementsByClassName('delBtn');

let id = 0;

addBtn.onclick = () => {
    let input = document.getElementById('input');
    let item = input.value;
    if (item === '') {
        alert('No text was entered...');
    }
    else {
        id  ;
 
        let ul = document.getElementById('list');
        let li = document.createElement('li');
        let button = document.createElement('button');

        button.onclick = function() {
          li.remove()
        }

        button.className = "delBtn"
        button.id = `delBtn_${id}`
        button.innerText = "\u00D7"
        
        li.id = `toDo_${id}`;
        li.className = 'toDoLine';
        li.innerText = item
        
        li.appendChild(button);
        ul.appendChild(li);

        input.value = '';
        input.focus();
    }
}

@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@300&family=Bebas Neue&family=Montserrat&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
}

h2 {
    margin: 10px;
}

.outerBox {
    border: 2px solid black;
    border-radius: 10px;
    width: 550px;
    background-color: yellowgreen;
    text-align: center;
}

.innerBox {
    border: 2px solid black;
    border-radius: 10px;
    height: 42px;
    width: 500px;
    background-color: #ebebeb;
    margin: auto;
    margin-bottom: 10px;
}

.input {
    border: none;
    border-radius: 10px;
    width: 400px;
    height: 40px;
    outline: none;
    background-color: #ebebeb;
}

.addBtn {
    font-weight: bold;
    border: 2px solid black;
    border-radius: 8px;
    background-color: lightgray;
    height: 25px;
    width: 90px;
}

.addBtn:hover, .addBtn:focus {
    background-color: gray;
}

ul {
    list-style: none;
    width: 500px;
    margin: auto;
    padding-left: 0pt
  }

li {
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: #ffff99;
    height: 22px;
    width: 450px;
    border: 2px solid black;
    border-radius: 10px;
    padding: 6px;
    text-align: left;
    font-size: small;
}

li:last-child {
    margin-bottom: 10px;
}

.delBtn {
    border: 1px solid gray;
    background-color: #ebebeb;
    font-weight: bold;
    float: right;
    height: 22px;
    border-radius: 5px;
}

.delBtn:hover {
    background-color: #ff3333;
    color: white;
}

<!DOCTYPE html>
<html lang="en-EN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>ToDo App</title>
</head>
<body>
    <div >
        <h2>MY TODO LIST:</h2>
            <div >
                <input type="text" id="input"  placeholder="Enter activity (max. 50 character)" maxlength="50"><button id="addBtn" >Toevoegen!</button>
            </div>
        <ul id="list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

innerHtml is almost always a wrong choice

let addBtn = document.getElementById('addBtn');

let id = 0;

addBtn.onclick = () => {
  let input = document.getElementById('input');
  let item = input.value;
  if (item === '') {
    alert('No text was entered...');
  } else {
    let ul = document.getElementById('list');
    let li = document.createElement('li');
    id  ;
    li.id = `toDo_${id}`;
    li.className = 'toDoLine';
    li.innerText = item;
    const button = document.createElement('button') // just create a button
    button.className = 'delBtn'
    button.id = `delBtn_${id}`
    button.textContent = '\u00D7'
    li.appendChild(button)
    button.onclick = () => { // and add listener
      alert('clicked')
    }
    ul.appendChild(li);
    input.value = '';
    input.focus();
  }
}

@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@300&family=Bebas Neue&family=Montserrat&display=swap');
body {
  font-family: 'Montserrat', sans-serif;
}

h2 {
  margin: 10px;
}

.outerBox {
  border: 2px solid black;
  border-radius: 10px;
  width: 550px;
  background-color: yellowgreen;
  text-align: center;
}

.innerBox {
  border: 2px solid black;
  border-radius: 10px;
  height: 42px;
  width: 500px;
  background-color: #ebebeb;
  margin: auto;
  margin-bottom: 10px;
}

.input {
  border: none;
  border-radius: 10px;
  width: 400px;
  height: 40px;
  outline: none;
  background-color: #ebebeb;
}

.addBtn {
  font-weight: bold;
  border: 2px solid black;
  border-radius: 8px;
  background-color: lightgray;
  height: 25px;
  width: 90px;
}

.addBtn:hover,
.addBtn:focus {
  background-color: gray;
}

ul {
  list-style: none;
  width: 500px;
  margin: auto;
  padding-left: 0pt
}

li {
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: #ffff99;
  height: 22px;
  width: 450px;
  border: 2px solid black;
  border-radius: 10px;
  padding: 6px;
  text-align: left;
  font-size: small;
}

li:last-child {
  margin-bottom: 10px;
}

.delBtn {
  border: 1px solid gray;
  background-color: #ebebeb;
  font-weight: bold;
  float: right;
  height: 22px;
  border-radius: 5px;
}

.delBtn:hover {
  background-color: #ff3333;
  color: white;
}

<!DOCTYPE html>
<html lang="en-EN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>ToDo App</title>
</head>

<body>
  <div >
    <h2>MY TODO LIST:</h2>
    <div >
      <input type="text" id="input"  placeholder="Enter activity (max. 50 character)" maxlength="50"><button id="addBtn" >Toevoegen!</button>
    </div>
    <ul id="list"></ul>
  </div>
  <script src="script.js"></script>
</body>

</html>