Removing a DOM element using jQuery not working

Question

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!

Community · Accepted Answer · 2017-05-23 12:30:14Z

4

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

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Sep 7, 2010 at 8:42

strager

90.3k27 gold badges139 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

strager Over a year ago

@Reigel, I opt for .live because it feels lighter to me. Attaching all those handlers while cloning feels ... heavy.

Reigel Gallarde Over a year ago

good point! +1, also, you might want to use .closest() instead of .parents() ;)

Odyss3us Over a year ago

Thanx guys, that worked, I was unaware that DOM events weren't copied along with the element.

Odyss3us Over a year ago

@Reigel Yeah, agreed, parents() is a little excessive for this particular task, thanx!

Reigel Gallarde Over a year ago

@strager - it just came to my mind, even if you use live, it still have same effect when we talk about how light or heavy. you see, live() waits for new element to come then bind an event to it. I think it's the same as the cloning don't you think?

|

pharalia · Accepted Answer · 2010-09-07 08:39:55Z

2

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.

answered Sep 7, 2010 at 8:39

pharalia

7094 silver badges6 bronze badges

Comments

Reigel Gallarde · Accepted Answer · 2010-09-07 08:42:35Z

2

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

answered Sep 7, 2010 at 8:42

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Collectives™ on Stack Overflow

Removing a DOM element using jQuery not working

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related