11

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 Chrome had no issues with the function. However, the link that is clicked disappeared in Chrome, even when I simplified the function as in the example below. I have seen this question: Can't use "download" as a function name in javascript. In the links, however, I did not see anything about "remove" as a reserved keyword. My question is this, I am correct about this being a keyword? If so, is there anywhere I can find a list of Google keywords? I have searched and have not found this to be a problem anywhere else.

<a href="javascript:void(0)" onclick="remove()">Remove</a>

Javascript:

function remove(){
 alert("Hi");
}
Community
  • 1
  • 1
illinoistim
  • 456
  • 10
  • 27

3 Answers3

9

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.

silly little me
  • 581
  • 3
  • 4
1

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.

Community
  • 1
  • 1
Xotic750
  • 22,914
  • 8
  • 57
  • 79
  • Can you explain more on why it is better to use the addEventListener? What should I do if there is more than one reference to the remove function? – illinoistim Apr 22 '13 at 16:36
  • Hopefully that's enough information to answer your further question, but I see you have already chosen an answer that you were happy with. – Xotic750 Apr 22 '13 at 17:46
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/

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405