How to remove original element after it was cloned?

Question

HTML:

<div id="test">
    <p class="test1">test 1</p>
    <p class="test2">test 2</p>
    <p class="test3">test 3</p>
    <p class="test4">test 4</p>
</div>

<div class="clickdiv">click</div>

jQuery

$('.clickdiv').on('click', function(){
    $('.test1').clone().appendTo('#test');
}

This will result one more <p> with class = "test1". Now how can I remove the original one that is first one?

`$('.test1').appendTo('#test');` no need to clone – A. Wolff Sep 11 '13 at 08:18 — A. Wolff, Sep 11 '13 at 08:18

Arun P Johny · Accepted Answer · 2013-09-11T08:22:54.650

21

I don't know why you can't just append the element to the parent, instead of cloning it then removing it.

Anyway

$('.test1').remove().clone().appendTo('#test');

Demo: Fiddle

If you want to copy the data and handlers associated with test1 to the clone then @ra_htial with a minor change have to be used

$('.clickdiv').on('click', function () {
    var $el = $('.test1');
    $el.clone(true).appendTo('#test');
    $el.remove();
});

Demo: Fiddle

edited Sep 11 '13 at 08:22

answered Sep 11 '13 at 08:14

Arun P Johny

384,651
66
527
531

when you click again this will not function. that is the cloned element doesn't have class? – Bhojendra Rauniyar Sep 11 '13 at 08:18
@C-Link because `.test1` is already at the bottom of the parent so append does not do anything – Arun P Johny Sep 11 '13 at 08:19
You can always use `end()`. It's pretty handy, but often not used. But you should definitely go with `A. Wolff's` comment – Jashwant Sep 11 '13 at 08:26
I tried both method but not what my slider is doing can you post about end() also. – Bhojendra Rauniyar Sep 11 '13 at 08:30
1

Thanks, but just don't understand how clone() works AFTER remove(), I thought it would not find anything to clone since, obviously, it has been removed? – eozzy Jun 07 '18 at 01:49

trrrrrrm · Answer 2 · 2013-09-11T08:24:47.770

2

$('.clickdiv').on('click', function(){
    var test1 =$('.test1');
    test1.clone().appendTo('#test');
    test1.remove();
}

edited Sep 11 '13 at 08:24

answered Sep 11 '13 at 08:14

trrrrrrm

11,362
25
85
130

3

test1 is already a jQuery object, so you don't need to pass it to $() again – Matus Sep 11 '13 at 08:17

score 0 · Answer 3 · answered Apr 04 '22 at 13:24

0

You don't need to remove the element because appendTo will copy and "remove" it.

You can simply do :

$('.test1').appendTo('#test');

answered Apr 04 '22 at 13:24

Sébastien Gicquel

4,227
7
54
84

How to remove original element after it was cloned?

3 Answers3

Linked