title: Confirm deletion alert code not quite right
body: <p>I'm creating a simple todo app in JS and i've added an alert box to confirm deletion when usr clicks the delete button. If user clicks 'OK' it deletes fine, and if clicked 'Cancel' it won't delete but it creates another empty 
  li tag under it.</p>
  
  <p>Something is not quite right with my deleteItem function but I can't figure out what, tried adding an else statement same thing happens. Any help with an explanation will be greatly appreciate (I'm a noob in JS as you can tell). Thanks!</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>//grab form id first
  let ourForm = document.getElementById("ourForm");
  let ourField = document.getElementById("ourField");
  let OurList = document.getElementById("ourList");
  
   //on submit event from user, do something
  ourForm.addEventListener("submit", (e) =&gt;{
    //will prevent alert appearing on any click event around form, ONLY when submit button is clicked.
      e.preventDefault();
      //access value of user input as a test
      //console.log(ourField.value);
  
    //now on submit we're gonna pass the function below which is created further down and takes one argument and its value:
      if(ourField.value === ""){
        alert("Please add a task")
      }else{
        createItem(ourField.value);
      }
  })
  
  function createItem(item) {
      let createdHTML = `&lt;li&gt;${item} &lt;button 
      onclick="deleteItem(this)"&gt;Delete&lt;/button&gt;&lt;/li&gt;`;
      ourList.insertAdjacentHTML("beforeend", createdHTML);
  
    //clear the inpur field value after user input:
      ourField.value = "";
  
    //keep field focused after clearing 
      ourField.focus();
  }
  
  function deleteItem(itemToDelete){
      //create alert
      let result = confirm("Are you sure you want to delete?");
      if (result === true) {
      //Logic to delete the item
      itemToDelete.parentElement.remove();
      ourField.focus();
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt; Todo App&lt;/h1&gt;
  &lt;form id="ourForm"&gt;
    &lt;input id = "ourField" type="text" autocomplete="off"&gt;
    &lt;button&gt; Create item&lt;/button&gt;
  
    &lt;h3&gt;To do tasks:&lt;/h3&gt;
    &lt;ul id="ourList"&gt;
    &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>