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

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"  />
      <button >Add to list</button>

      <ul ></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.

CodePudding user response：

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"  />
      <button >Add to list</button>

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

CodePudding user response：

To remove a new created element in the DOM with the click function in JavaScript, you can use the "removeChild" method. Here is an example:

// create the element
var newElement = document.createElement('p');
newElement.innerHTML = 'Click here to remove me';

// add the element to the DOM
document.body.appendChild(newElement);

// add a click event listener to the element
newElement.addEventListener('click', function() {
  // remove the element from the DOM
  document.body.removeChild(newElement);
});

This will create a new paragraph element with the text "Click here to remove me", add it to the DOM, and attach a click event listener to it. When the element is clicked, it will be removed from the DOM.