CODEWITHSUNDEEP
javascriptlistdombuttonevent-handling
RVos86
RVos86

Reputation: 1

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

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 class="delBtn" 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 class="outerBox">
        <h2>MY TODO LIST:</h2>
            <div class="innerBox">
                <input type="text" id="input" class="input" placeholder="Enter activity (max. 50 character)" maxlength="50"><button id="addBtn" class="addBtn">Toevoegen!</button>
            </div>
        <ul id="list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Upvotes: 0

Views: 43

Answers (2)

Konrad
Konrad

Reputation: 24661

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 class="outerBox">
    <h2>MY TODO LIST:</h2>
    <div class="innerBox">
      <input type="text" id="input" class="input" placeholder="Enter activity (max. 50 character)" maxlength="50"><button id="addBtn" class="addBtn">Toevoegen!</button>
    </div>
    <ul id="list"></ul>
  </div>
  <script src="script.js"></script>
</body>

</html>

Upvotes: 1

Idrizi.A
Idrizi.A

Reputation: 12010

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 class="outerBox">
        <h2>MY TODO LIST:</h2>
            <div class="innerBox">
                <input type="text" id="input" class="input" placeholder="Enter activity (max. 50 character)" maxlength="50"><button id="addBtn" class="addBtn">Toevoegen!</button>
            </div>
        <ul id="list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Upvotes: 2

Related Questions