$(this).parent().remove(); not functioning : <p>I am running through a todo list tutorial for jQuery and I ran into an issue that I cannot figure out. My code looks exactly like what is in the video. I have tried to do this on both Plunker and JSFiddle and was not able to get it to work. Can anyone see what is wrong with this?</p>

<p>Here is my HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;

  &lt;/head&gt;

  &lt;body&gt;
    &lt;h1&gt;Tasks&lt;/h1&gt;

    &lt;ul id="todoList"&gt;

    &lt;/ul&gt;

    &lt;input type="text" id="newText" /&gt;&lt;button id="add"&gt;Add&lt;/button&gt;



    &lt;script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>and my jQuery:</p>

<pre><code>function addListItem() {
  var text = $('#newText').val();
  $('#todoList').append('&lt;li&gt;' + text + ' &lt;button class="delete"&gt;Delete&lt;/button&gt;&lt;/li&gt;');
  $('#newText').val('');
}

function deleteItem() {
  $(this).parent().remove();
}

$(function() {
  $('#add').on('click', addListItem);
  $('.delete').on('click', deleteItem);
});
</code></pre>
