0

I currently have the following code:

$( '.spandiv:eq(1)' ).remove();

This very nicely removes the second (as it uses 0-based indexing) item in the span list, which is great. However, I have a question.

Is it possible to remove everything except the second item?

I know I could code up using the lt() and gt()' but wondered if there was anot equal` option?

Homer_J
  • 3,277
  • 12
  • 45
  • 65

2 Answers2

2

You can use :not or .not()

$( '.spandiv:not(:eq(1))' ).remove();

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388
  • Ahh, nice - didn't realise you could do that! What's the performance hit, any idea? – Homer_J Dec 28 '13 at 09:58
  • @Homer_J I would recommend using `$('.spandiv').not(':eq(1)')` over `$('.spandiv:not(:eq(1))')` , because the `.spandiv:not(:eq(1))` will - I think that it is still true - force jQuery to use [Swizzle](http://sizzlejs.com/) for the whole query, while `$('.spandiv').not(':eq(1)')` will find the elements by the class `spandiv` using the native functionality (for modern browsers) and then just filter that result. – t.niese Dec 28 '13 at 10:01
  • The performance hit won't be that noticeable unless you have a lot of elements to filter, and wether you use `:not` or `.not` doesn't really matter that much, as Sizzle is jQuery's selector engine, and it will be used anyway. – adeneo Dec 28 '13 at 10:11
  • Thanks, in one section there are over 400 elements! So be interesting to see how it works. – Homer_J Dec 28 '13 at 10:15
  • @Homer_J, @adeneo jQuery/Swizzle first checks if it is a simple selector and uses `getElementsByTagName`, `getElementByID` or `getElementsByClassName` for them (if `getElementsByClassName` is not supported Swizzle will travers the _whole_ DOM). If the selector is not a simple one Swizzle will try to use `querySelectorAll` if it is not possible (in that case because of the `:eq`) it will start the _fallback_ to traverse the _whole_ DOM. So if `document.querySelectorAll(yourQuery)` does not work, and you have a noticeable performance impact with `$(yourQuery)` you may want to split it up. – t.niese Dec 28 '13 at 10:30
  • Thanks for that, appreciated. Am using the `.not()` version as there appears to be an increase in performance. Not fully tested but it does appear to be faster. – Homer_J Dec 28 '13 at 10:32
  • http://stackoverflow.com/questions/8845811/performance-differences-between-using-not-and-not-selectors – adeneo Dec 28 '13 at 10:33
  • @adeneo for completeness I added a test that removes the element from the resultset without using `not` and `eq`, [jsperf.com/not-not-test/2](http://jsperf.com/not-not-test/2), for many cases it for sure not relevant, but it is always good to have in mind. – t.niese Dec 28 '13 at 11:01
  • @t.niese - for completeness I added a native solution, that should be a lot faster than jQuery, not that it's very relevant either -> http://jsperf.com/not-not-test/3 – adeneo Dec 28 '13 at 11:11
  • @adeneo But there you need to take care that jQuery did not add anything to the elements and/or their descendants (data or event listeners), because this removes the data cleanup step of jQuery, for sure a valid way if the context in which it is used is perfectly known. – t.niese Dec 28 '13 at 11:17
1

You can use .not() 

$('.spandiv').not(':eq(1)').remove();

JSFIDDLE DEMO

Dhaval Bharadva
  • 3,053
  • 2
  • 24
  • 35