How to Clear Elements Created From User Input In JS-CodePudding

I am creating a to do list for my Javascript program and I am wondering how to clear the elements that was created from the user input. What I mean by that is that the user enters something to add onto the to do list and that element added should be cleared by clicking the clear button. The issue with my program is that it clears the words inside of the text bar instead of the elements added onto the list. I am wondering how to fix resolve this issue and get my clear button to remove the added elements instead of the words inside of the text bar. Here is the link for you to test out the full code: https://jsfiddle.net/y9L1xbkr/

<body>

<form id="todo" style="float:left">

<h1 id="todo" style="font-family:Helvetica; color:#006600"><b>To Do</b>   

<input type="text" id="myInput" placeholder="Add Item">

<span onclick="newElement()" >Add</span>

<input type="button" onclick="newFunction()" value="Clear">

<ul id="myUL">
</ul>
</h1>
</form>
    <form id="done" style="float:right">
    <h2 id="done" style="font-family:Helvetica; color:#006600"><b>Done</b></h2>
</form>

<script>
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i  ) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i  ) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

// Create a new list item when clicking on the "Add" button
function newElement() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("myInput").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert("You must write something!");
  } else {
    document.getElementById("myUL").appendChild(li);
  }
  document.getElementById("myInput").value = "";

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i  ) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

function newFunction() {
            document.getElementById("todo").reset();

    var ul = document.getElementById("myUL");
    var list = document.getElementById("myInput");
    var item = document.getElementById(list.value);
    ul.removeChild(item);
}
</script>

CodePudding user response：

Hmm, if you want to clear all Todos from the list, simply

function newFunction() {
  var todos = document.getElementById("myUL");
  if (todos) {
    todos.innerHTML = '';
  }
}

myUL is your list id.

CodePudding user response：

For me this is the best way:

<form id="myForm">
  First name: <input type="text" name="fname" value="Demo"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Reset form">
</form>
     
<script>
function myFunction() {
    document.getElementById("myForm").reset();
}
</script>