jquery remove all elements except for first one

Using jquery remove how can i remove all the span tags except for the first one..

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>
';
107033 次浏览
小开

使用此选择器:

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

So your code is this:

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

Try with:

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

or to be more specific:

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

To remove it from DOM, instead of html variable, use your selector:

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

Try this

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

Or, as an alternative:

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

slice()
Given a jQuery object that represents a set of DOM elements, the .slice() method constructs a new jQuery object containing a subset of the elements specified by the start and, optionally, end argument.

start
Type: Integer
An integer indicating the 0-based position at which the elements begin to be selected. If negative, it indicates an offset from the end of the set.

Source: https://api.jquery.com/slice

Therefore, $('span').slice(1).remove() will select, and remove, all elements after the first instance.

小开

The above may work for the specific example, when you have nothing else in the content except child elements of the type you're looking for. But you will run into problems with more complex markup:

<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
小开

This following code works for me:

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

提交答案