title: Javascript to-do list in which list items are not deleted on clicking the cross button
body: <p>A To-Do list app where pending tasks are added in an ordered list .</p>
  
  <p>Nothing happens on clicking the cross button whereas an onclick delElement() function for the cross button has been defined.</p>
  
  <p>It would be great if someone can point out the mistake.</p>
  
  <p>The HTML and Javascript code is given below-</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function newElement() {
  
    var newli = document.createElement("li");
  
    var inputValue = document.getElementById("InputText").value;
  
    var label = document.createElement("label");
  
    label.innerText = inputValue;
  
    newli.appendChild(label);
  
    var deleteButton = document.createElement("button");
  
    deleteButton.innerText = "X";
  
    deleteButton.id = "delete";
  
    deleteButton.onclick = "delElement()";
  
    newli.appendChild(deleteButton);
  
    var PendingTasks = document.getElementById("pending-tasks");
  
    if (inputValue === '') {
  
      alert("You must write something!");
  
    } else {
  
      PendingTasks.appendChild(newli);
  
    }
  
    document.getElementById("InputText").value = "";
  
  }
  
  
  function delElement() {
  
    var listItem = this.parentNode;
  
    var ol = listItem.parentNode;
  
    ol.removeChild(listItem);
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;script src="jsfile.js"&gt;&lt;/script&gt;
  
  &lt;div class="jumbotron jumbotron-fluid text-white text-center"&gt;
  
    &lt;div class="container"&gt;
      &lt;h1 class="display-1 font-weight-bold"&gt;TO DO&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="InputBox"&gt;
    &lt;input type="text" name="NewTask" placeholder="Input a new task" id="InputText"&gt;
    &lt;input type="submit" onclick="newElement()" value="Add" class="addbtn"&gt;
    &lt;br&gt;
  &lt;/div&gt;
  
  &lt;div style="background-color: #fffdd0"&gt;
    &lt;h2 class="title"&gt;Pending Tasks&lt;/h2&gt;
    &lt;ol id="pending-tasks"&gt;
    &lt;/ol&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>