title: Building To-do list website that works with append, having trouble deleting notes in javascript
body: <p>So I'm making a website as part of a school project that is a to-do list where you enter task date and time and it pops a note with your info.<br>
  I'm supposed to use local storage and it works just fine to store the notes and restore them after a refresh or closing the browser and reopening.<br>
  Problem is when I delete a note using "onclick='this.parentElement.remove()" on the icon that appears in the note, I don't know how to access the same spot in the array that stores all the notes.</p>
  
  <p>I will add my code and I hope its clear enough what I'm asking, first time trying this here.</p>
  
  <pre><code>var tasks = [];
  
  // onclick='this.parentElement.remove()'
  
  function initializenotes(){
      var backup = JSON.parse(localStorage.getItem("tasks"));
      if(backup.length&gt;0){
       tasks = backup;
      }
      console.log(backup);
      console.log(tasks);
      for(var i = 0; i &lt; backup.length; i++){
      var container = document.getElementById("taskcontainer");
      var card = document.createElement("div");
  
      card.className = "taskcard";
      card.innerHTML = "&lt;span class='taskstyle'&gt;" + backup[i].task + "&lt;/span&gt;" 
      +"&lt;span class='datestyle'&gt;" + backup[i].date + "&lt;/span&gt;" + "&lt;span 
      class='timestyle'&gt;" + backup[i].time + "&lt;/span&gt;" + "&lt;i class='fas fa- 
      times 
      iconstyle' onclick='this.parentElement.remove();deletenote()'&gt;" + " 
      &lt;/i&gt;";
  
      container.append(card);
      }
  }
  initializenotes();
  
  
  
  function add(){
      var task = document.forms["inputform"]["task"].value;
      var date = document.forms["inputform"]["date"].value;
      var time = document.forms["inputform"]["time"].value;
  
      if(validation(task, date) == true){
      tasks.push(createobj(task, date, time));
      localStorage.setItem("tasks", JSON.stringify(tasks));
      var taskindex = tasks.length -1;
  
      var card = document.createElement("div");
      var container = document.getElementById("taskcontainer");
  
  
      card.className = "taskcard";
      card.innerHTML = "&lt;span class='taskstyle'&gt;" + tasks[taskindex].task + " 
      &lt;/span&gt;" +"&lt;span class='datestyle'&gt;" + tasks[taskindex].date + "&lt;/span&gt;" 
      + " 
      &lt;span class='timestyle'&gt;" + tasks[taskindex].time + "&lt;/span&gt;" + "&lt;i 
      class='fas fa-times iconstyle' 
      onclick='this.parentElement.remove();deletenote()'&gt;" + "&lt;/i&gt;";
  
  
  
      container.append(card);
      document.getElementById("errormsg").innerHTML = "";
      var task = document.forms["inputform"]["task"].value = "";
      var date = document.forms["inputform"]["date"].value = "";
      var time = document.forms["inputform"]["time"].value = "";
      }
  
  }
  
  function deletenote(){
  console.log("got into it");
  
  }
  
  function createobj(task, date, time){
      var obj = {
          task:task,
          date:date,
          time:time
      }
  return obj;
  }
  
  function validation(task,date){
      if(task == ""){
          document.getElementById("errormsg").innerHTML = "Task required";
          return false;
      }
      else if(date == ""){
          document.getElementById("errormsg").innerHTML = "Date required";
          return false;
      }
      else{
          return true;
      }
  }
  </code></pre>
  
  <p>And here is the HTML (sorry for not posting earlier):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;!--font awesome--&gt;
      &lt;link rel="stylesheet" 
      href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" 
      integrity="sha384- 
      gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP"
      crossorigin="anonymous"&gt;
      &lt;!-- bootstrap --&gt;
      &lt;link rel="stylesheet"     it didnt let me add the bootstrap dir, so 
      its supposed to be here
  
      &lt;!-- my own css --&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;title&gt;proj&lt;/title&gt;
      &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container w-50"&gt;
          &lt;div class="row mt-2"&gt;
              &lt;div class="col"&gt;
                  &lt;h1 class="text-center headfont"&gt;My Task Board&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col"&gt;
                  &lt;div class="row"&gt;
                      &lt;form name="inputform"&gt;
                  &lt;/div&gt;
                  &lt;div class="row mt-3"&gt;
                      &lt;div class="col-1 shulayim"&gt;&lt;/div&gt;
                      &lt;div class="col-11 pl-0"&gt;&lt;input type="text" 
              class="form-control" disabled&gt;&lt;/div&gt;
                 &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-1 removeTopBorder shulayim"&gt;&lt;/div&gt;
                      &lt;div class="col-11 pl-0"&gt;&lt;input name="task" 
  type="text" class="form-control removeTopBorder" placeholder="Your Task"&gt; 
  &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-1 removeTopBorder shulayim"&gt;&lt;/div&gt;
                      &lt;div class="col-11  pl-0"&gt;&lt;input name="date" 
     type="date" class="form-control removeTopBorder" id="dateid"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-1 removeTopBorder shulayim"&gt;&lt;/div&gt;
                      &lt;div class="col-11 pl-0"&gt;&lt;input name="time" 
    type="time" class="form-control removeTopBorder" id="timeid"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-1 removeTopBorder shulayim"&gt;&lt;/div&gt;
                      &lt;div class="col-11 pl-0"&gt;&lt;input type="text" 
      class="form-control removeTopBorder" disabled&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row mt-3"&gt;
                      &lt;div class="col-3 offset-3"&gt;&lt;button type="button" 
  onclick="add()" class="btn btn-dark btn-lg"&gt;Add task&lt;/button&gt;&lt;/div&gt;
                      &lt;div class="col-6"&gt;&lt;button type="reset" class="btn 
  btn-dark btn-lg"&gt;Reset form&lt;/button&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row mt-3"&gt;
                      &lt;div class="col-12"&gt;
                          &lt;p id="errormsg" class="errmsg"&gt;Note: Task and 
     finish date are required&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row mt-3"&gt;
              &lt;div class="col-12"&gt;
                  &lt;div id="taskcontainer"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- bootstrap scripts --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
  integrity="sha384- 
  q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script 
  
   once again its not letting me add some too long stuff so its here, the 
   bootstrap scripts
      &lt;!-- my own script --&gt;
      &lt;script src="scripts.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I really tried my best to indent it properly but I either don't understand how it works yet or something is bugged because sometimes when I hit space it just goes down a line and I can never properly format it as code.
  hope this is readable</p>
  
  <p>Going to try and add everything in jfiddle</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>var tasks = [];
  
  // onclick='this.parentElement.remove()'
  
  function initializenotes() {
    var backup = JSON.parse(localStorage.getItem("tasks"));
    if (backup.length &gt; 0) {
      tasks = backup;
    }
    console.log(backup);
    console.log(tasks);
    for (var i = 0; i &lt; backup.length; i++) {
      var container = document.getElementById("taskcontainer");
      var card = document.createElement("div");
  
  
  
      card.className = "taskcard";
      card.innerHTML = "&lt;span class='taskstyle'&gt;" + backup[i].task + "&lt;/span&gt;" + "&lt;span class='datestyle'&gt;" + backup[i].date + "&lt;/span&gt;" + "&lt;span class='timestyle'&gt;" + backup[i].time + "&lt;/span&gt;" + "&lt;i class='fas fa-times iconstyle' onclick='this.parentElement.remove();deletenote()'&gt;" + "&lt;/i&gt;";
  
  
  
      container.append(card);
    }
  }
  initializenotes();
  
  
  
  function add() {
    var task = document.forms["inputform"]["task"].value;
    var date = document.forms["inputform"]["date"].value;
    var time = document.forms["inputform"]["time"].value;
  
    if (validation(task, date) == true) {
      tasks.push(createobj(task, date, time));
      localStorage.setItem("tasks", JSON.stringify(tasks));
      var taskindex = tasks.length - 1;
  
      var card = document.createElement("div");
      var container = document.getElementById("taskcontainer");
  
  
      card.className = "taskcard";
      card.innerHTML = "&lt;span class='taskstyle'&gt;" + tasks[taskindex].task + "&lt;/span&gt;" + "&lt;span class='datestyle'&gt;" + tasks[taskindex].date + "&lt;/span&gt;" + "&lt;span class='timestyle'&gt;" + tasks[taskindex].time + "&lt;/span&gt;" + "&lt;i class='fas fa-times iconstyle' onclick='() =&gt; { this.parentElement.remove();deletenote(taskindex)}'&gt;" + "&lt;/i&gt;";
  
  
  
      container.append(card);
      document.getElementById("errormsg").innerHTML = "";
      var task = document.forms["inputform"]["task"].value = "";
      var date = document.forms["inputform"]["date"].value = "";
      var time = document.forms["inputform"]["time"].value = "";
    }
  
  }
  
  function deletenote() {
    var taskindex = tasks.length - 1;
    console.log("got into it");
    tasks.splice(taskindex, 1);
    localStorage.setItem("tasks", JSON.stringify(tasks));
  
  
  }
  
  function createobj(task, date, time) {
    var obj = {
      task: task,
      date: date,
      time: time
    }
    return obj;
  }
  
  function validation(task, date) {
    if (task == "") {
      document.getElementById("errormsg").innerHTML = "Task required";
      return false;
    } else if (date == "") {
      document.getElementById("errormsg").innerHTML = "Date required";
      return false;
    } else {
      return true;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background-image: url("img/body-background.jpg");
  }
  
  .headfont {
    font-family: cursive;
    font-size: 4em;
  }
  
  .shulayim {
    border: 1px solid #0f5aa5;
    border-left: 0;
    border-right: 0;
    background-color: #fcfcfc;
  }
  
  .removeTopBorder {
    border-top: 0 !important;
  }
  
  .form-control::-webkit-input-placeholder {
    opacity: 0.7;
  }
  
  .form-control:-ms-input-placeholder {
    opacity: 0.7;
  }
  
  .form-control::-ms-input-placeholder {
    opacity: 0.7;
  }
  
  .form-control::placeholder {
    opacity: 0.7;
  }
  
  .taskcard {
    position: relative;
    width: 13em;
    height: 19em;
    background-color: #ffff99;
    border: 1px solid #532f00;
    border-top: 0;
    border-bottom: 0;
    border-radius: 13% 32% 10% 12% / 0% 8% 0% 29%;
    display: inline-block;
    margin-right: 3em;
    margin-left: 3em;
    margin-top: 1.4em;
    margin-bottom: 1.4em;
    padding-left: 0.3em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
  }
  
  .taskcard:hover .iconstyle {
    opacity: 1;
  }
  
  .taskstyle {
    display: inline-block;
    position: absolute;
    height: 10.66em;
    width: 7.61em;
    top: 1.2em;
    left: 0.5em;
    font-size: 1.6em;
    font-family: cursive;
    overflow: auto;
    word-wrap: break-word;
    color: #323538;
  }
  
  .datestyle {
    display: inline-block;
    position: absolute;
    top: 0.2em;
    left: 0.6em;
    font-size: 1.2em;
  }
  
  .timestyle {
    display: inline-block;
    position: absolute;
    top: 0.2em;
    right: 0.6em;
    font-size: 1.2em;
  }
  
  .borderfix {
    border-bottom: 1px solid #0f5aa5;
    border-top: 1px solid #0f5aa5;
  }
  
  #dateid::before {
    content: 'Finish date';
    margin-right: 0.6em;
    color: #6c757d;
    opacity: 0.7;
  }
  
  #timeid::before {
    content: 'Deadline';
    margin-right: 1.5em;
    color: #6c757d;
    opacity: 0.7;
  }
  
  .errmsg {
    font-size: 2em;
    font-weight: bolder;
    color: #2f64a8;
  }
  
  .iconstyle {
    opacity: 0;
    position: absolute;
    top: 0.7em;
    right: 4.4em;
  }
  
  .form-control {
    border-radius: 0;
    border: 1px solid #0f5aa5;
    border-right: 0;
    border-left-color: red !important;
  }
  
  input[type="text"],
  textarea,
  .form-control:focus {
    outline: none;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #0f5aa5;
    border-right: 0;
    background-color: #fcfcfc;
  }
  
  .form-control:disabled,
  .form-control[readonly] {
    background-color: #fcfcfc;
    opacity: 1;
  }
  
  .btn,
  .btn:focus {
    border: 1px solid #13688a;
    width: 6em;
    height: 2.5em;
    font-size: 1.7em;
    padding: 0.2em;
    -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
    box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  }
  
  
  /*# sourceMappingURL=style.css.map */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;!--font awesome--&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"&gt;
    &lt;!-- bootstrap --&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
    &lt;!-- my own css --&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;title&gt;proj&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container w-50"&gt;
      &lt;div class="row mt-2"&gt;
        &lt;div class="col"&gt;
          &lt;h1 class="text-center headfont"&gt;My Task Board&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="col"&gt;
          &lt;div class="row"&gt;
            &lt;form name="inputform"&gt;
          &lt;/div&gt;
          &lt;div class="row mt-3"&gt;
            &lt;div class="col-1 shulayim"&gt;&lt;/div&gt;
            &lt;div class="col-11 pl-0"&gt;&lt;input type="text" class="form-control" disabled&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-1 removeTopBorder shulayim"&gt;&lt;/div&gt;
            &lt;div class="col-11 pl-0"&gt;&lt;input name="task" type="text" class="form-control removeTopBorder" placeholder="Your Task"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-1 removeTopBorder shulayim"&gt;&lt;/div&gt;
            &lt;div class="col-11  pl-0"&gt;&lt;input name="date" type="date" class="form-control removeTopBorder" id="dateid"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-1 removeTopBorder shulayim"&gt;&lt;/div&gt;
            &lt;div class="col-11 pl-0"&gt;&lt;input name="time" type="time" class="form-control removeTopBorder" id="timeid"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-1 removeTopBorder shulayim"&gt;&lt;/div&gt;
            &lt;div class="col-11 pl-0"&gt;&lt;input type="text" class="form-control removeTopBorder" disabled&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row mt-3"&gt;
            &lt;div class="col-3 offset-3"&gt;&lt;button type="button" onclick="add()" class="btn btn-dark btn-lg"&gt;Add task&lt;/button&gt;&lt;/div&gt;
            &lt;div class="col-6"&gt;&lt;button type="reset" class="btn btn-dark btn-lg"&gt;Reset form&lt;/button&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row mt-3"&gt;
            &lt;div class="col-12"&gt;
              &lt;p id="errormsg" class="errmsg"&gt;Note: Task and finish date are required&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row mt-3"&gt;
        &lt;div class="col-12"&gt;
          &lt;div id="taskcontainer"&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- bootstrap scripts --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;!-- my own script --&gt;
    &lt;script src="scripts.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>