.parent().remove() issue

Question

I have a jQuery-based form where you can add extra people to the application. I\'m cloning the first fieldset and adding it onto the end up to a max of 3 additional people.

Answer 1

You can do this for delete the parent:

 $(document).on("click", ".remove", function() { 
      $(this).parent().remove(); 
 });

or you can do this for delete all parents:

 $(document).on("click", ".remove", function() { 
      $(this).parents().remove();
 });

Answer 2

Make sure you close your expresion:

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

Answer 3

The 'live' function call has been deprecated and no longer works. You can find instructions for how to rewrite functions using the replacement 'on()' method here and more info about the deprecation:

http://api.jquery.com/live/

To handle all current and newly created elements, you must now use:

$(document).on("click", ".remove", function() {
    $(this).parent().remove();
});

jQuery runs on the document object, not the element and there is an additional parameter to specify which elements to watch and add event listeners to.

Answer 4

Try:

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

Events are bound on page load so newly added element aren't.

Answer 5

The elements don't originally exist, which means you need to use .live() or .delegate()

For example, change:

use $(".remove").click(...) instead of $(".remove").live("click", ...) this