删除附加的父元素

Question

I have a list maker that appends items but also appends a trash can item to each of the list items which is made. I have a function on the trash can that should remove the parent element when it is clicked but it doesn't work.

Here is a simple version of what I'm trying to do

JSFiddle

$('button').click(function() {
    $('#contain').append('<div class="div"></div>').append('<div class="nested"></div>');
});

$('.nested').click(function() {
    $(this).parent().remove();
});

How can I remove the parent element of only the nested div that is clicked?

Answer 1

Use on() because you're calling an event on dynamically appended element.

$('body').on('click', '.nested', function(){
   $(this).parent().remove();
});

Also we can use $('#contain') instead of $('body') as well.

 $('button').click(function() { $('#contain').append('<div class="div"></div>').append('<div class="nested"></div>'); }); $('body').on('click', '.nested', function() { $(this).parent().remove(); }); 

 .div { width: 100px; height: 50px; background: #000; margin-top: 50px; } .nested { width: 50px; height: 25px; background: red; z-index: 100; margin-top: -25px; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Add </button> <div id="contain"> </div> 

Answer 2

try this:

$('#contain').on('click', '.nested', function(){

});

you have to listen to clicks on the container for appended elements, since they're not in the DOM when the page is loaded

Answer 3

Two issues:

1. As the others have mentioned, you're binding your .nested click event before your element is created, meaning it won't have the event handler attached. As the others mentioned, something like $("#contain").on("click", ".nested", function() {}) will fix the issue

2. $.append returns the element you are appending to not the element being appended so your .nested is nested under the $("#contain") . This means the $(this).parent() is actually returning the #contain element. A fix for the issue is

    $("<div class='nested' />").appendTo($("<div class='div' />").appendTo("#contain")); 

Answer 4

Change :

$('.nested').click(function() {
    $(this).parent().remove();
});

To:

$(document).on("click",".nested",function(){

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

})