jquery 删除除第一个元素以外的所有元素答案

【问题标题】：jquery remove all elements except for first onejquery 删除除第一个元素以外的所有元素
【发布时间】：2013-09-23 08:02:08
【问题描述】：

使用 jquery remove 如何删除除第一个之外的所有跨度标签..

EDIT

 var html = var htm = $("#addin").find(".engagement_data:last-child").find(".keys_values").html();
    html='
       <span style="display:block;" class="k_v">
         <innput type="text" class="e_keys" style="width:65px;" placeholder="key"/>
         <input type="text" class="e_values" style="width:65px;" placeholder="value"/>
       </span>
       <span style="display:block;" class="k_v">
         <input type="text" class="e_keys" style="width:65px;" placeholder="key"/>
         <input type="text" class="e_values" style="width:65px;" placeholder="value"/>
       </span>
';

【问题讨论】：

标签： jquery

【解决方案1】：

使用这个选择器：

$('span:not(first-child)')

所以你的代码是这样的：

$('span:not(first-child)').remove();

【讨论】：

【解决方案2】：

尝试：

$(html).not(':first').remove();

或者更具体一点：

$(html).not('span:first').remove();

要从 DOM 中删除它，而不是 html 变量，请使用您的选择器：

$('#addin .engagement_data:last-child .keys_values').not('span:first').remove();

【讨论】：

这将从 html 元素中删除跨度。如何从 DOM 中删除它。请查看编辑
我试过你的最后一句话，似乎所有的 span 元素都被删除了..
如果您的 $('#addin .engagement_data:last-child .keys_values') 返回两个 span 元素，它应该可以正常工作。你确定它只返回没有父级的跨度吗？
是的，它只返回 span，这对我有用..$('#addin .engagement_data:last-child .keys_values').find("span:gt(0)").remove( );

【解决方案3】：

试试这个

$('html').not(':first').remove();

【讨论】：

【解决方案4】：

或者，作为替代：

$('span').slice(1).remove();

slice()
给定一个表示一组 DOM 元素的 jQuery 对象， .slice() 方法构造一个新的 jQuery 对象，其中包含由 start 和可选的 end 参数指定的元素。

开始
类型：整数
一个整数，指示开始选择元素的从 0 开始的位置。如果为负数，则表示距集合末尾的偏移量。

来源：https://api.jquery.com/slice

因此，$('span').slice(1).remove() 将选择并删除第一个实例之后的所有元素。

【讨论】：

如果您想保留超过 1 个，这很有用。例如。保留 3：$('span').slice(3).remove();

【解决方案5】：

当您在内容中除了您要查找的类型的子元素之外没有其他内容时，上述内容可能适用于特定示例。但是你会遇到更复杂的标记问题：

<ul id="ul-id" class="f-dropdown tiny" data-dropdown-content="">
    <li>
    <div id="warningGradientOuterBarG" class="barberpole">
    <div id="warningGradientFrontBarG" class="warningGradientAnimationG">
        <div class="warningGradientBarLineG"></div>
    </div>
    </div>
    </li>
    <li>foo</li>
    <li>bar</li>
</ul>

var $ul = $('#ul-id')
$ul.not(':first')  //returns nothing
$ul.find(':first') // returns first <li>
$ul.find(':not(:first)') //returns the inner divs as well as the last two li's
$('#ul-id li:not(first-child)')  // this returns all li's
$('#ul-id li:not(:first)')  // this works: returns last two li's
$ul.find('li').slice(1) // this also works and returns the last two li's
$ul.find('li').slice(1).remove()   // and this will remove them

【讨论】：

【解决方案6】：

以下代码对我有用：

$(html).children().not(':first').remove();

【讨论】：