如何在克隆元素后删除原始元素？

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

这将导致多出一个class="test1"的<p>。现在我该如何删除原来的第一个呢？

- Bhojendra Rauniyar

---

将 $('.test1') 添加到 #test 中，无需克隆。 - A. Wolff

Answer 1

我不知道为什么你不能直接将元素附加到父元素，而非克隆它然后删除。

无论如何

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

演示: Fiddle

如果你想要复制与test1相关联的数据和处理程序到克隆中，那么需要使用@ra_htial并进行微小的更改。

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

示例：Fiddle

- Arun P Johny

---

当您再次单击时，这将不起作用。也就是说，克隆的元素没有类？ - Bhojendra Rauniyar

@C-Link 因为 .test1 已经在父元素的底部，所以追加操作不会产生任何效果。 - Arun P Johny

你总是可以使用 end()。它非常方便，但通常不被使用。但你应该绝对采用 A. Wolff 的评论。 - Jashwant

我尝试了两种方法，但没达到我的滑块所要做的事情，你能发一篇关于end()的文章吗？ - Bhojendra Rauniyar

谢谢，但是我不太明白remove()之后clone()的工作原理，因为显然已经被删除了，它不会找到任何东西来克隆？ - eozzy

Answer 2

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

- trrrrrrm

---

test1 已经是一个 jQuery 对象了，所以你不需要再把它传递给 $()。 - Matus

Answer 3

你不需要删除元素，因为appendTo会将其复制并“移除”。

你只需要这样做：

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

- Sébastien Gicquel