Why are cloned elements not removed?

Question

JavaScript

Good afternoon!

Please help me solve the following problem.

tennis-play.web-volodin.ru/reg2.html
At the end of the form there is a field for the social network. There is an "add another link" link that clones the field:

$('.newverstka .tournaments-page .reg-block form .field a.add').click(function() {
    $(this).parent().parent().prev('.soc').find('.social:first-child').clone().appendTo('.field.soc');
  });

And there is a "delete" link that deletes the parent block (in which the link itself and the text field are):

$('.newverstka .tournaments-page .reg-block form .field .social .delete').click(function() {
    $(this).parent().remove();
  });

But the problem is that the block with the field, which is originally there, is deleted perfectly, but the cloned blocks are not deleted.

How to solve this problem?

Thank you very much in advance!

Answer 1

When an element is cloned, the events attached to it are not copied to the new element. Use event bubbling.

$('.newverstka .tournaments-page .reg-block form .field').on('click', '.social .delete', function() {
  $(this).parent().remove();
});

Or clone with events.clone(true)

Answer 2

The call is not right, try this (it worked in the browser)
$('.social .delete').click(function() {
$(this).parent().remove();
});