Michael Michael - 6 months ago 34
jQuery Question

$(this).parent().remove(); not functioning

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?

Here is my HTML:

<!DOCTYPE html>

<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />



<ul id="todoList">


<input type="text" id="newText" /><button id="add">Add</button>

<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>


and my jQuery:

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

function deleteItem() {

$(function() {
$('#add').on('click', addListItem);
$('.delete').on('click', deleteItem);


Try this:

$('.delete').on('click', deleteItem); => $('body').on('click', '.delete', deleteItem);

Explain: if you want to link an event to an element that does not yet exist, you must first bind to document.