title: parent element not removed with jquery click event
body: <p>I am trying to remove a the parent of a button, which is a list element, once the button has been clicked. </p>
  
  <p>New to the programming world so it may be something simple, but I cant find a solutution based on what I have found with others posting on stack overflow and the internet. Please can someone point out what I am doing wrong?</p>
  
  <p>I am using a combination of Javascript and Jquery. I am trying to utilise the skills I already know of plus a bit of researching in order to get the job done. I am in the process of learning the techniques and skills that would be required to have a similar remove event using pure Javascript, but for now I am just using Jquery for that side of things.</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>$(document).ready(function() {
  
    document.getElementById("add").addEventListener("click", function() {
  
      var taskinput = document.getElementById("task").value;
  
      if (taskinput) {
  
        var tasktext = document.createTextNode(taskinput);
        var list = document.createElement("li");
        list.appendChild(tasktext);
        var button = document.createElement("button");
        button.setAttribute("class", "completed");
        button.innerHTML = "X";
        list.appendChild(button);
        document.getElementById("task-to-do").appendChild(list);
        document.getElementById("task").value = " ";
      } else {
        alert("Please enter a task");
      }
  
    });
  
    $("button .completed").click(function() {
      $(this).closest("li").remove();;
    });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
  
    &lt;header&gt;
      &lt;h1&gt;ENTER A TASK BELOW&lt;/h1&gt;
      &lt;input type="text" id="task"&gt;&lt;img id="add" src="add.png"&gt;
    &lt;/header&gt;
  
    &lt;div id="incomplete-tasks"&gt;
      &lt;h4&gt;TO-DO LIST&lt;/h4&gt;
      &lt;ul id="task-to-do"&gt;
  
      &lt;/ul&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>