can't remove li element-CodePudding

I'm trying to create a to-do list app, I;m able to add li elements (i.e,. user tasks) added when clicking on the ' ' button, however, id like to remove li. elements when clicking on them but when I click on a li element or task added by a user I cannot remove it. Nothing happens.

function dark() { // setting up dark-mode 
  var element = document.body;
  element.classList.toggle("dark-mode"); //dark-mode class
}

let addToDoButton = document.getElementById('addToDo');
let toDoContainer = document.getElementById('newTask');
let inputField = document.getElementById('tasks');
let removeButton = document.getElementById('remove');

addToDoButton.addEventListener('click', function() {
  var input = document.createElement('li')
  input.classList.add('tasks')
  input.innerText = inputField.value;
  toDoContainer.appendChild(input);
  inputField.value = '\n';
  //input.style.textDecoration = "line-through";

})

input.addEventListener('click', function() {
  // input.style.textDecoration = "line-through";

  toDoContainer.removeChild(input);
  inputField.value = " ";
  //const task = document.getElementById("remove");
  //task.innerHTML = " ";
})

<body id="dark-mode">
  <div >
    <div >
      <label >
        <input type="checkbox"onclick="dark()" checked>
        <span >&#9728;</span>
        </label>
    </div>
    <div >
      <h1>Today I will ...</h1>
    </div>
    <br>
    <div  id="newTask">
      <input  id="tasks" type="text" placeholder="Task to be completed..."> <br>
      <button id="addToDo"> </button><br>
    </div>
  </div>
  <div >
    <ul>
      <!--tasks show here-->
    </ul>
  </div>

CodePudding user response：

the input variable is not known in the global scope. I would recommend to do event delegation from a static parent using the event object.

function dark() { // setting up dark-mode 
  var element = document.body;
  element.classList.toggle("dark-mode"); //dark-mode class
}

let addToDoButton = document.getElementById('addToDo');
let toDoContainer = document.getElementById('newTask');
let inputField = document.getElementById('tasks');
let removeButton = document.getElementById('remove');

addToDoButton.addEventListener('click', function() {
  var input = document.createElement('li')
  input.classList.add('tasks')
  input.innerText = inputField.value;
  toDoContainer.appendChild(input);
  inputField.value = '\n';
  //input.style.textDecoration = "line-through";

})

toDoContainer.addEventListener('click', function(event) {
  if([...toDoContainer.querySelectorAll('li.tasks')].includes(event.target)) {
      toDoContainer.removeChild(event.target);
  }
})

<body id="dark-mode">
  <div >
    <div >
      <label >
        <input type="checkbox"onclick="dark()" checked>
        <span >&#9728;</span>
        </label>
    </div>
    <div >
      <h1>Today I will ...</h1>
    </div>
    <br>
    <div  id="newTask">
      <input  id="tasks" type="text" placeholder="Task to be completed..."> <br>
      <button id="addToDo"> </button><br>
    </div>
  </div>
  <div >
    <ul>
      <!--tasks show here-->
    </ul>
  </div>

CodePudding user response：

please use visibility='none' or use javascript to hide this element