delete parent element upon click

Question

 $('#add').click(function () { let task = $('<div class="task"></div>'); let name_des = $('<div class="name_description"></div>'); let name = $('<div class="name"></div>'); name.append('<div id="taskName"></div>', '<div id="taskTime"></div>'); name_des.append(name, '<div class="description"></div>'); task.append('<input type="checkbox">', name_des, '<small id="delete">Delete</small>'); $('#taskCont').append(task); }); $('#delete').click(function (){ $(this).parent().remove(); });

 #taskCont{ /* background: yellow; */ display: flex; align-items: center; justify-content: center; flex-direction: column; }.task{ width: 300px; height: 50px; background: red; display: flex; align-items: center; justify-content: center; }.task:not(:first-child){ margin-top: 10px; }.task > *{ border: 1px solid white; }.task > *:not(:nth-child(2)){ width: auto; margin: 10px; }.name_description{ display: flex; align-items: center; justify-content: center; height: 20px; }.name_description *{ height: 20px; background: green; border: 2px solid yellow; }.name{ display: flex; align-items: center; justify-content: center; flex-direction: column; }.name > *{ height: 20px; border: 2px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">add</button> <div id="taskCont"></div>

In this code why the delete button not working? How can I delete the parent element here?

Answer 1

Since you are trying to attach event on dynamically created element, try using delegation approach that uses jQuery's on() . This will attach events to elements that are added to the DOM at a later time.

Change:

$('#delete').click(function (){

To:

$('body').on('click', '#delete', function (){

 $('#add').click(function () { let task = $('<div class="task"></div>'); let name_des = $('<div class="name_description"></div>'); let name = $('<div class="name"></div>'); name.append('<div id="taskName"></div>', '<div id="taskTime"></div>'); name_des.append(name, '<div class="description"></div>'); task.append('<input type="checkbox">', name_des, '<small id="delete">Delete</small>'); $('#taskCont').append(task); }); $('body').on('click', '#delete', function (){ $(this).parent().remove(); });

 #taskCont{ /* background: yellow; */ display: flex; align-items: center; justify-content: center; flex-direction: column; }.task{ width: 300px; height: 50px; background: red; display: flex; align-items: center; justify-content: center; }.task:not(:first-child){ margin-top: 10px; }.task > *{ border: 1px solid white; }.task > *:not(:nth-child(2)){ width: auto; margin: 10px; }.name_description{ display: flex; align-items: center; justify-content: center; height: 20px; }.name_description *{ height: 20px; background: green; border: 2px solid yellow; }.name{ display: flex; align-items: center; justify-content: center; flex-direction: column; }.name > *{ height: 20px; border: 2px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">add</button> <div id="taskCont"></div>

Answer 2

You should attach the click event dynamically. Live may be a good choice. Try this.

 $(selector).live( eventName, function(){} );