jquery remove parent not working on dynamically created divs

Question

im trying to use jquery in order to make a button remove its parent div.

my markup:

        
                      

              相关标签:
       
      

Answer 1

I recently was running into an issue with $.on() that unclear and very similar to this application, as most "remove this's parent" functions are.

To illustrate with this question's example:

$('.web_store_fields').on('click', '.button_remove_web_store', function(e){
    $(this).parent().remove();
});

the big catch here is the second parameter. you must select the container $('.container') and pass the element selector of the 'button' as the second parameter to the .on function. so a definition(of sorts)

$('.container').on('click', '.myremovebutton', function(e){
    $(this).parent().remove();
});

Answer 2

Do not use a live handler -- it has been deprecated in jQuery 1.7 and removed in jQuery 1.9 -- a breaking change for a great many people.

Instead, use the on handler, which is the recommended way now:

$(document).on('click', '.button_remove_web_store', function() {
    $(this).parents("div:first").remove();
});

Answer 3

Use a delegated handler (on) with the class as the selector so that any new buttons that get added later will still work.

$('body').on('click', '.button_remove_web_store', function() {
    $(this).parents("div:first").remove();
});