milliAmp

I was debugging a client-side heavy application today in IE7 and ran up against a very weird bug. Anyway, even with the Microsoft Script debugger, it took me a couple of hours to trace down the cause of this one bug.

The system has a page which works similarly to Apple Mac OS X’s Finder windows in Column View. In IE7, I was having a problem where all the children of a node inside a table cell where being removed from the DOM when I removed the table cell itself. If you think this sounds normal, let me explain.

In Javascript, DOM Elements exist as Javascript objects and can be attached into a document at any point, they do not have to be a document, they can exist solely as fragments. The normal DOM ‘removeChild’ method does exactly this; it detaches the child from the parentNode but if there are any references to the DOM element in javascript-land, it does not get deleted (or garbage collected to be more precise). This means you can reattach the node somewhere else after some processing.

Safari, Firefox and Opera appear to do this with the deleteCell method of a ‘table’ as well but Internet Explorer appears to do something different. There is a little bit of speculation here as I haven’t created a minimal test case of this bug yet but it appear that IE detaches all the DOM Nodes recursively beneath the cell it deleted. This doesn’t appear in the MSDN documentation so I’m not sure quite what is happening, am I experiencing a bug caused by something else maybe.

How would that be useful!? I can’t see a purpose for it but whatever.

My fix was to remove all the child nodes of the ‘td’ element using removeChild first, then delete the cell. That meant the elements that were in the cell before hand still existed if there were any references to them, which there were.