仅删除第一个子元素并使用jQuery保留第二个元素

Question

环顾四周，无法找到答案，但如果之前有人问过，请道歉。

我正在寻找将另一个DIV替换为另一个DIV，为新动画添加动画，然后删除第一个DIV，允许新DIV取出已删除的DIV的位置。创建并附加新DIV后，HTML代码如下所示（减去注释）：

<div class="className">Inner HTML</div> <!-- original "className" div -->
<div class="className">Inner HTML</div> <!-- appended "className" div -->

我尝试了几种方法，最近的方法是：

$(".className:eq(0)").remove();

和

$(".className:eq(0)").html() = $(".className:eq(1)").html();
$(".className:eq(1)").remove();

第一种方法删除所有“className”元素，很可能是由于[0]元素引用整个数组。第二种方法消除了第二个元素，而不是第一个元素。

将新元素设置为动画并将其保留原样是很简单的，但我希望避免在DOM中构建“className”元素，因为解决方案需要递归，允许“ className“div根据需要多次替换。

Answer 1

http://api.jquery.com/first-child-selector/

$(".className:first-child").remove();

如果最多只有两个（旧的和新的）className可以是邻居，你可以选择第二个，然后再回到第一个。

$(".className + .className").prev().remove();

从以下方面窃取一些想法：

• http://api.jquery.com/category/selectors/
• http://api.jquery.com/category/traversing/

Answer 2

只需简单使用 .replaceWith()

$(".className:first-child").replaceWith('<div class="className">Inner HTML</div>');

.replaceWith会将之前的classsName替换为新的.append()，在这种情况下，您不需要.remove()和$(".className:first").remove(); 。

或

$('<div class="className">New Div</div>').appendTo('#target').animate({
    width: 120,
    height: 120
}, 1500, function() {
    $('div.className:first').remove();
});

根据评论

我认为你正在尝试以下内容：

{{1}}

<强> Working sample

Answer 3

使用jquery的first方法

 $(".className").first().remove();

如果您永远不想删除所有对象，可以通过首先检查结果集的长度来保护：

   if($(".className").length > 1) {
          $('className").first().remove();
   }