Question

<select id="select1">
    <option value="11">11</option>
    <option value="12">12</option>
</select>

<select id="select2">
    <option value="21">21</option>
    <option value="22">22</option>
</select>​

Behavior of the find() and the children() methods:

find():

$('#select1, #select2').find('option:not(:first)').remove();​​​​​​

Works as expected: select1 has only option 11 and select2 has only option 21

children():

$('#select1, #select2').children('option:not(:first)').remove();

Works weirdly: select1 has only option 11 but select2 has no option anymore…

Why?

Demo

Answer 1

From what I see

$('#select1, #select2').find('option:not(:first)')

is equal to

$('#select1  option:not(:first), #select2  option:not(:first)')

not

$('#select1, #select2').children('option:not(:first)')

Think about the context selector as it’s the same as using .find()

$('option:not(:first)',$('#select1, #select2'))

By using children with first.. you are only getting the first children option returned in collection.. whereas the context/find selector looks for the first in each context