Home How to remove a new createtd Element in the Dom with the click Function in Javascript

Questions

How to remove a new createtd Element in the Dom with the click Function in Javascript

December 4, 2022

I created a TODO List. I have a input and take the value of the input to append it to an element.
With the value of the input i create a new list elemnet with a delete button. Now i have troubles to delete my new created elemnt within the list.

this is my js code

//create a variable for the button
let btn = document.querySelector('.add');
// create a variable for the list
let ul = document.querySelector('.list');
//create a variable for the input to get the value
let input = document.querySelector('.txt');

// with add button take the value from the input and create a new li elemtn
btn.addEventListener('click', function () {
  let txt = input.value; // create variable for input value
  let li = document.createElement('li'); // create new list elemnt
  li.textContent = txt;
  let but = document.createElement('button'); // create ne button elemnt
  but.textContent = 'delete';
  li.textContent = txt;
  li.appendChild(but);

  ul.appendChild(li);
});

// try to delte list element from unorderd list
but.addEventListener('click', function () {
  ul.removeChild(li);
});

Here the html code

<!DOCTYPE html>
<html lang="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" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="container">
      <input type="text" class="txt" />
      <button class="add">Add to list</button>

      <ul class="list"></ul>
    </div>
    <script src="index.js"></script>
  </body>
</html>

The goal is to delete the list element from the todo app with the delete button

I tried to add an eventhandler to the delete Button within each List Element. I tried to use removechild but it will not work.

>Solution :

The issue you’re encountering is most likely caused by timing. You’re declaring variables with let which scopes them to a local function but re-using them during an event. You may also have tried to set these variables before the DOM was full loaded, in which case they don’t actually exist yet.

Your code works "as expected" with minor modifications:

document.addEventListener('DOMContentLoaded', function() {
  //create a variable for the button
  let btn = document.querySelector('.add');
  // create a variable for the list
  let ul = document.querySelector('.list');
  //create a variable for the input to get the value
  let input = document.querySelector('.txt');

  // with add button take the value from the input and create a new li elemtn
  btn.addEventListener('click', function () {
    let txt = input.value; // create variable for input value
    let li = document.createElement('li'); // create new list elemnt
    li.textContent = txt;
    let but = document.createElement('button'); // create ne button elemnt
    but.textContent = 'delete';
    but.addEventListener('click', function () {
      ul.removeChild(li);
    });
    li.appendChild(but);
    ul.appendChild(li);
  });
  // try to delte list element from unorderd list
})

    <div id="container">
      <input type="text" class="txt" />
      <button class="add">Add to list</button>

      <ul class="list"></ul>
    </div>
    <script src="index.js"></script>