24

Take the following two ways of removing an array of elements from the DOM using jQuery:

var collection = [...]; //  An array of jQuery DOM objects

// Using jQuery iteration
$(collection).each(function(index, element) { element.remove(); });

// Or as pointed out by Barmar
$(collection).remove();

// Using native iteration
collection.forEach(function(element) { element.remove(); });

Is there any real difference operationally? I'd expect, unless the browser interpreter/compiler is clever enough, that there would be additional unnecessary overhead with the former method, albeit probably minor if the array is small.

Nhan
  • 3,595
  • 6
  • 30
  • 38
Lee
  • 3,869
  • 12
  • 45
  • 65
  • 4
    Your second is biased because it still uses jQuery. `collection.forEach(function(element) {element.parentNode.removeChild(element);})` is a fairer comparison. – Niet the Dark Absol Feb 12 '17 at 17:44
  • 1
    No, `$(selector).each()` calls the function with the element as the argument, not the jQuery object. – Barmar Feb 12 '17 at 17:46
  • 3
    Where does collection come from? Typically with jQuery you don't need to create your own arrays of elements since jQuery objects do that for you – charlietfl Feb 12 '17 at 17:47
  • 2
    To iterate over an array, not the elements in a jQuery object, you use `$.each(array, function...)`, not `$(array).each(function...)` – Barmar Feb 12 '17 at 17:48
  • @charlietfl Say for instance I'm appending elements to the DOM and wish to push them, as they're appended, to an array for quicker access instead of scanning the DOM again. – Lee Feb 12 '17 at 17:49
  • OK...then it's a matter of what are you pushing...jQuery objects or dom elements. If they are jQuery objects don't need to wrap them again in `$()` – charlietfl Feb 12 '17 at 17:53
  • @charlietfl jQuery objects since I'm using jQuery to select the DOM elements. Good point about re-wrapping. Edited again to make this clearer. – Lee Feb 12 '17 at 17:54

4 Answers4

15

Operationally is a bit vague but here is how $.each is implemented.

each implementation

[].forEach() would most likely be implemented in native code for each browser.

Without doing performance testing, they are pretty similar. Although if you can remove jQuery altogether that is at least a few kb the browser does not need to load.

Azametzin
  • 5,223
  • 12
  • 28
  • 46
dpix
  • 2,765
  • 2
  • 16
  • 25
5

The comments on the original question are good for your specific scenario of wanting to remove individual items.

On a more general note, some other differences:

1) Array.forEach() obviously requires that you're iterating across an array. The jQuery approach will let you iterate across the properties of an object.

2) jQuery.each() allows short-circuiting. Check out this post that mentions use of "some()" and "every()" for doing similar things with pure js:

How to short circuit Array.forEach like calling break?

Eric
  • 121
  • 1
  • 8
3

Performance wise they both are similar Perf test

forEach is implemented native in the Browser which makes it easier to maintain for non-jquery developers while on the other hand each offers better readability.

Tal
  • 1,091
  • 12
  • 25
-3

Array.forEach is a method that iterates over native Javascript arrays.

jQuery collection.each is an iteration method implemented by hand by the jQuery team. a jQuery collection is not an array.

This was also more relevant when jQuery first came out, and Array.forEach was not implemented in any browsers.

Andy Ray
  • 30,372
  • 14
  • 101
  • 138