Question

I feel like I should be able to use the :not(:first-child) selector here, but it does not seem to work quite as I had hoped.

http://jsfiddle.net/39KZ9/6/

I would like to have the label still appear. How can I achieve that simply?

<div id="OrdersSearchResult">
    <input type="radio" id="SearchResultsLink" name="SearchResultNavigation" checked="checked"/>
    <label id="SearchResultsLinkLabel" for="SearchResultsLink">Search Results</label>
</div>​

$(document).ready(function(){
    $('#OrdersSearchResult').children('label:not(:first-child)').remove();
    $('#OrdersSearchResult').children('input:not(:first-child)').remove();
});​

Update: Just so it’s clear, I was hopng that the first-child selector would look for the first child of the already matched elements. That is, I want it to select all inputs which are not the first input found and similiarly for labels. Unfortunately, it matches on the first child element of OrdersSearchResult’s children regardless of other filters applied.

Answer 1

http://jsfiddle.net/39KZ9/16/

$(document).ready(function(){
    $('#OrdersSearchResult').children('label:gt(0)').remove();
    $('#OrdersSearchResult').children('input:gt(0)').remove();
});​

Use greater than selector.

:gt(0) basically says items greater than the first since an index of 0 is the first.

http://api.jquery.com/gt-selector/

By the way :first-child returns the first child of the parent element not the first in a group of elements.

Even simpler:

$(document).ready(function(){
    $('#OrdersSearchResult').children('label:gt(0),input:gt(0)').remove();
});​