CODEWITHSUNDEEP
javascriptjqueryhtml
Odyss3us
Odyss3us

Reputation: 6635

Removing a DOM element using jQuery not working

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!

Upvotes: 2

Views: 955

Answers (3)

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

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

Upvotes: 2

strager
strager

Reputation: 90012

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();
    });

Upvotes: 4

pharalia
pharalia

Reputation: 709

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.

Upvotes: 2

Related Questions