Removing a DOM element using jQuery not working

Question

Hi guys, I'll get straight to the point, I am using jQuery to clone a div element, which has a span within it to which I have binded a click event that when triggered removes the just cloned section from the DOM, now the first section works ok, but for some reason it won't remove the cloned sections once they are created, here is my code,

HTML:

<div id='wrapper'>
<div id="mail">
<div class="container" id="email">
    <label for="email_address">Email address: </label>
    <div>
        <input type="text" name="email_address" id="email_address"  />
        <span class="remove"></span>
    </div>
</div>
</div>
<div class="container">
    <input type="button" id="button" name="button" value="click me" />
</div>
</div>

jQuery:

$(document).ready(function() {

        $("span.remove").click(function(){
            $(this).parents("div.container").remove();
        });


        var count = 0;

        $('#button').attr('disabled','');
        $('#button').click(function(){
            count++;
            alert(count);
            var test = $('#email.container').clone().attr('id', 'email_' + count).appendTo('#mail');
            test.children(':nth-child(2)').children(':first').attr('id', 'mail_' + count);

            if(count == 3){
                $('#button').attr('disabled','disabled');
            }

        });
});

I'm probably missing something small, but I can't seem to find the problem.

Also, I've been trying to find a better way of cloning the sections, and a better way of traversing the child elements when I rename them, it seems a little messy at the moment, any ideas on that?

Thanx in advance!

Answer 1

DOM events aren't copied along with an element, and you are attaching the event on load. You need to attach the event to the cloned element / children when they are created.

Answer 2

The problem is as @pharalia stated.

A solution is to use .live to bind your handlers:

    $("span.remove").live('click', function(){
        $(this).parents("div.container").remove();
    });

Answer 3

you can use .clone(true) there. It will copy also the events binded to the element. without true as the parameter, the event is not copied.

demo