Is “remove” a reserved keyword in Google Chrome?

Question

I have an interesting problem, and I think I got to the root of it, but I wanted to be sure. I have a link that calls a function called remove(). All browsers except Chrom

Answer 1

I can't find any documentation on it, but DOM elements in Chrome have a native method remove that apparently removes them. In onclick, this actually refers to the element itself so it ends up calling this.remove() which removes the element. To get around this, you can just call window.remove() instead.

http://jsfiddle.net/3YkZH/1/

It would also be better to use standard event binding via addEventListener which does not have this problem when simply calling remove:

http://jsfiddle.net/3YkZH/2/

Answer 2

I had no issue in chromium using it, well not in this manner

<a href="#" id="remove">Remove</a>

function remove() {
    alert("Hi");
}

document.getElementById("remove").addEventListener("click", remove, false);

on jsfiddle

Inline javascript is considered bad practice.

If you have more elements using the same function, just add more lines, like this

document.getElementById("remove1").addEventListener("click", remove, false);
document.getElementById("remove2").addEventListener("click", remove, false);
document.getElementById("remove3").addEventListener("click", remove, false);
document.getElementById("remove4").addEventListener("click", remove, false);

or you could get a nodelist and loop through that

var nodelist = document.querySelectorAll("[id^=remove]");

Array.prototype.forEach.call(nodelist, function (element) {
    element.addEventListener("click", remove, false);
}

You can take a look at another answer here on SO to find out more about the differences between event binding methods, also do a little G searching on the subject will give you further information. And of course, you would have avoided the issue that you were experiencing by doing it in this manner.

Answer 3

Elements in Chrome have a .remove() method which allows for self-removal of an element instead of having to do it from the parent.

The trouble is that when using attribute handlers, you get a different scope chain. That scope chain includes the element itself, as well as the document. This means that all properties of the element and document show up as variables.

Because you named your function remove(), and because it's a global function/variable, it is being shadowed by the .remove property (now variable) on the element itself. This can be seen with an alert. If you change your handler to:

onclick="alert(remove)"

...you'll get something like:

function remove() { [native code] }

So it's not that it's reserved, but rather that it's used as a property which ends up shadowing the global.

---

To fix it, either use the global directly:

onclick="window.remove()"

Or change the function name.