TODOLIST.html

<!DOCTYPE html>
<html>
<head>
<title>TO DO LIST</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
// Create a "close" button and append it to each list item
var myUL = document.getElementsByTagName("ul");
var i;
for (i = 0; i < myUL.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("delete");
  span.className = "delbtn";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("delbtn");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}


// 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("delete");
  span.className = "delbtn";
  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";
    }
  }
}
</script>
</head>
<body>
  <div id="myDIV" class="header">
  <h2 style="margin:5px">My To Do List</h2>
  <input type="text" id="myInput" placeholder="Enter element....">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL">
  <li>complete your to do list.....</li>
</ul>

</body>
</html>