jQuery efficiency question

Question

I have HTML like this:

<div id="best">
    <img src="image.jpg">
    <span>title</span>
    <img src="image.jpg">
    <span>title</span>
    <img src="image.jpg">
    <span>title</span>
</div> 

I want jQuery code to remove all spans. Which is best:

$('#best').find('span').remove();

or

$('#best').children('span').remove();

or

$('#best').find('span').each().remove();

or is there a better solution? Which is best?

Answer 1

Go for readability:

$('#best > span').remove()

Answer 2

$('#best span').remove();

Answer 3

1 and 3 are identical. 2 is different in that it only removes direct descendants of #best, while the other two will remove descendants at any level. It's really up to you whether you use find or children, as it depends on your intentions, but there's no need for each.

You can, however, contract the whole thing into the selector, so 1 would become $('#best span').remove(); and 2 would become $('#best > span').remove();.