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

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();

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.

Use this selector:

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

So your code is this:

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

This following code works for me:

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

Try this

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

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