jQuery custom “remove” event with Chrome 24

|   Jan 15, 2013

On January 10th 2013, Google released version 24 of Chrome, which included an unexpected feature: the native remove() method of an HTML element:

687474703a2f2f636f6e74656e742e73637265656e636173742e636f6d2f75736572732f4d6f6f6e5363726970742f666f6c646572732f53637265656e73686f74732f6d656469612f38336635393161632d396337382d343136362d626335372d6466366266373731383236382f30303030303036382e706e67

It’s essentially a shortcut for this:

element.parentNode.removeChild(element);

While this seems like a welcome addition to the DOM API, it ended up causing all kinds of problems in our app, because we happen to use a custom event named remove. As soon as the “remove” custom event was triggered, the element would disappear! This happens because jQuery tries to call the native method on the element with the same name as the event. The most common example of this behavior would be:

$(element).trigger('click'); // the element will actually be "clicked"

Before Chrome introduced this method, we were able to trigger a custom “remove” event anytime something was… removed. We thought we were safe because our custom event names were namespaced. But, after Chrome was silently upgraded to version 24, we soon realized that the namespacing didn’t matter. Our only solution was to go through our JavaScript code and rename all of our “remove” events with something more verbose.

Even though I now know that a new remove() method exists, I wasn’t able to find any information about it in the Chrome release notes. If anyone has more information on this particular change, please let me know!

Comments

  • Why not just add `event.preventDefault();` to your custom event? That should prevent jQuery from attempting to call the native method.

    The `remove` method is a relatively recent addition to the DOM spec, particular to the ChildNode interface (i.e. a Node that has a parentNode). Chrome is just doing its usual thing and trying to keep bleeding edge. If this makes you worried, you can always start running Chrome Canary to get an idea of what’s coming down the pipe ~3 versions out.

    Commented on January 15, 2013 at 11:21 am
  • Here’s a link to the ChildNode interface section of the DOM spec, in which the `remove` method was added: http://dom.spec.whatwg.org/#interface-childnode

    Commented on January 15, 2013 at 11:30 am
  • Hey, to prevent the Sun removes the element should use $ (element). TriggerHandler (‘remove’) to shoot the event and no. “Trigger”. http://api.jquery.com/triggerHandler/ Greetings!

    Commented on January 16, 2013 at 8:52 am
  • Unfortunately, preventDefault only works if your custom event is already in place; otherwise, the “new” native remove function will be called, removing the element from the DOM. Granted, no one should trigger remove before your custom event is added, but this is something else to think about.

    I am the author of a jQuery plugin that adds a custom remove event and one of the users notified me of this change. Here is the fiddle they sent: http://jsfiddle.net/Tn272/.

    Commented on January 16, 2013 at 11:36 am

Leave a comment

Your email address will not be published. Required fields are marked *

Connect with Facebook

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Sign up to receive email communications regarding events, webinars, and product news.

Author Spotlight

Jason Moon
Jason Moon Senior Software Engineer View full bio

What is Socialcast?

Socialcast by VMware (NYSE: VMW) is a social network for business uniting people, information, and applications with its real-time enterprise activity stream engine. Behind the firewall or in the cloud, Socialcast enables instant collaboration in a secure environment. Socialcast is headquartered in San Francisco, California. www.socialcast.com