Removing element attributes

Benchmark created by David Mark on


Description

Basic DOM operation: removing element attributes

Like their attr method, the jQuery removeAttr method is famously broken and (as shown here) quite inefficient. It's no less verbose than:

el.removeAttribute('accesskey'); // Fails in IE5/6/7/compat mode

…yet like many such methods, it is somehow considered advantageous for beginners. Of course, there can't be any advantage to getting wrong answers slower than right ones, particularly with little or no explanation in the documentation.

$(el).removeAttr('accesskey'); // Also fails in IE5/6/7/compat mode

From the jQuery documentation:

Note: If attempting to remove an inline onclick event handler using .removeAttr(), one may find that this doesn't achieve the desired effect in Internet Explorer 6,7 or 8. Instead it is recommended to opt for using .prop() to achieve this as follows

So they had an inkling at some point that something was wrong, but never bothered to investigate. Of course, this issue is just the tip of a very large (and old) iceberg. How, after all of these years, this project could catch only fleeting glimpses of such a fundamental issue is a mystery only to those who haven't visited the jQuery developer and support forums. There's little talk about cause-effect relationships, just whether a given patch "fixes" the unit test results.

Of course, they've been told about this many times as well. The basic answer key was published in 2007 (and revisited in every code review since). The code is contained in My Library, as well as the Attributes primer.

The original issue has been known since IE 5. It's like jQuery is developed in a parallel universe where the old IE browsers never existed. But then, supporting those browsers is the main selling point for what is essentially a JS version of QSA (a feature which debuted in IE 8). So the popularity of this script can't possibly have a rational explanation.

They did recently add an additional line of code (after yet another code review that singled out the removeAttr method), which is clearly an attempt to work around one issue (one that appears to be of their own making). Guessing based on feedback, year after year, creates such buildups of nonsense. The "logic" fluctuates back and forth, a line or two at a time and so the expectations of code built atop it change. This is not a good way to write software (in any language); for browser scripting, the approach is definitely doomed to fail.

Meanwhile, beginners assume that the magic jQuery method is giving them their best shot (at what should be a can't miss). That's what the bloggers tell them, but then bloggers don't usually read the code. They take the word of the "experts" who wrote the code and their sterling unit tests. :)

Punchline is beginners (and even most experts) never needed this method in the first place and the naming of it makes it look as if it is the opposite of attr (which it is not). Superficial testing may also make it look like the opposite of attr, but a quick glance at the contained three lines of code dispels that notion. Of course, most beginners never read the code either. That's the whole "point" of a script like jQuery. :)

And the documentation won't dispel that notion either. It makes it sound like attr and removeAttr are opposites as well, both dealing with attributes (which they do not).

JFTR, the attr method tries to set property values by attribute name. It doesn't do it very well, but that seems to be its intention. The removeAttr method claims to remove attributes, but manages to call attr on the first line, so it is clearly tangled up as well. Fascinating stuff if you aren't on a deadline. :)

Really have to wonder why self-proclaimed "experts" would subject themselves to such punishment (e.g. publishing scripts that call attr and removeAttr as if they made sense). Perhaps they are more interested in marketing than creating usable solutions? ;)

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
/*
 * Context here is an HTML5 document
 * Appropriate build for this context would exclude XHTML support
 * Next line asserts document will create an HTML DOM
 * There are virtually no documents on the Web that create an XHTML DOM
 *
 */
var API = { disableXmlParseMode:true };
</script>
<script src="//www.cinsoft.net/mylib099-min.js"></script>

<script>
  var getHtmlElement = API.getHtmlElement;
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
My Library
// NOTE: Don't wish to test performance of gEBI, gEBTN, etc.

E(getHtmlElement()).removeAttribute('accesskey');
ready
jQuery
// NOTE: won't work in old IE (or compat mode)
// Hard to say what else may go wrong (and where)
// Will need a *lot* of time and graph paper to figure out

jQuery('html').removeAttr('accesskey');

 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by David Mark on