How can I make .querySelectorAll() or .forEach() w

Question

I want to remove all elements with class sample.

This is working well in Chrome and Safari:

document.querySelectorAll('.sample').forEach(function(e) {
    e.parentNode.removeChild(e);
});

Here is the error I get in Firefox:

TypeError: document.querySelectorAll(...).forEach is not a function

Answer 1

I've just tested document.querySelectorAll('.element') with .forEach in Firefox 71, and it worked.

CanIUse shows that it's been supported in FF, since version 50 (late 2016): https://caniuse.com/#search=forEach

Older versions of FF have a 0.25% marketshare, so .forEach should be safe to use.

Answer 2

document.querySelectorAll returns a NodeList which is indexed like an array, but not an Array so you can't call the array methods on it.

You can use Array.from(nodeList) in ES6 or Array.prototype.slice.call(nodeList) for ES5

 Array.from(document.querySelectorAll('selector')).forEach(el => el)

Answer 3

You can also use a polyfill (see https://developer.mozilla.org/de/docs/Web/API/NodeList/forEach):

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}

This adds the forEach method to the NodeList, if it is missing.