help with clone and appendTo in jquery

Question

Here is my DOM:

    <div class="group">
        <div class="comment">
            <button class="addLink">Add link</button>
        </div>

        <div class="link">
            <button class="removeLink">Remove link</button>
        </div>
    </div>

I wanna click on the button.addLink and it will copy the div.link and append it as last child in div.group.

i started out with this code but got stuck.

 $(this).parent().parent().children(':last').clone().appendTo();

i dont know how to write appendTo. cause i want it to be appended to div.group but i cant just type it as 'div.group' cause there will be a lot of other div.group so i have to select it from a relational point of view.

could someone help me out here?

Felix Kling · Accepted Answer · 2010-01-24 09:36:43Z

4

$(this).parent().parent().children(':last').clone().appendTo($(this).parent().parent());

Or a bit nicer:

var $parent = $(this).parent().parent();
$parent.children(':last').clone().appendTo($parent);

appendTo() accepts a parameter as target where the elements should be appended to.

You should read the API documentation, it is well explained.

edited Jan 24, 2010 at 9:36

answered Jan 24, 2010 at 9:31

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Comments

Russ Cam · Accepted Answer · 2010-01-24 09:37:57Z

1

$("button.addLink").click(function() {
    var self = $(this);
    var linkDiv = self.parent().next().clone();
    self.parent().parent().append(linkDiv);    
});

Here's a Working Demo. Click on the Preview button and try the code out.

answered Jan 24, 2010 at 9:37

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Comments

karim79 · Accepted Answer · 2010-01-24 09:47:32Z

1

Try:

$(".addLink").click(function() {
    var clone = $(this).parent().next("div.link").clone();
    $(this).closest(".group").append(clone);
});

edited Jan 24, 2010 at 9:47

answered Jan 24, 2010 at 9:32

karim79

343k67 gold badges420 silver badges409 bronze badges

1 Comment

Russ Cam Over a year ago

$(this).next()... should be $(this).parent().next() to traverse to the <div class="link">

Reigel Gallarde · Accepted Answer · 2010-01-24 09:44:08Z

0

Try .parents()

$('.addlink').click(function(){
   var parent = $(this).parents('div.group');
   parent.children(':last').clone().appendTo(parent);
});

answered Jan 24, 2010 at 9:44

Reigel Gallarde

65.5k21 gold badges126 silver badges142 bronze badges

1 Comment

Felix Kling Over a year ago

parents can deliver more than one element. It also traverses up to the root node. karim79's approach with closest is much better in this case, see parents vs closest here: api.jquery.com/closest

Collectives™ on Stack Overflow

help with clone and appendTo in jquery

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related