Efficiently removing textnodes from the DOM

Question

Without getting into too many details, I'm cleaning up whitespace inside tables using javascript. I need to remove large amounts of textnodes. This seems to be the bottleneck in my script when it comes to IE9. All of the following methods do the job, but they cause a tremendous slow-down. ``` domNode.removeNode(true); domNode.nodeValue = ""; domNode.parentNode.removeChild(domNode); ``` Is there a way to do a bulk remove or a way to hide them in the dom or such. Just something faster. I've also tried this on the textnodes: ``` domNode.innerHTML = ''; ``` While it executes quickly, the textnodes seem to be unphased by it. Also, I need to retain the event bindings so a .innerHTML replace on the whole table doesn't really seem like an option. Though it does run about 5 times faster. Update: Rough benchmarks on suggested solutions: ``` //around 480ms stripWhitespaceTextNodes(domNode); //around 640ms parent.removeChild(domNode); stripWhitespaceTextNodes(domNode); parent.insertBefore(domNode…

Accepted Answer

The usual trick for this is to remove the container on which you're performing these operations from the DOM before doing the big changes, and then put it back when you're done.

So in your case, that might be:

```
var table = /* ...get a reference to the table...*/;
var nextNode = table.nextSibling; // May be null, that's fine
var parent = table.parentNode;
parent.removeChild(table);
/* ...clean up the text nodes... */
parent.insertBefore(table, nextNode);
```

Event handlers remain attached even when the tree is detached from the page's DOM, so they'll be there when the tree is put back.

Efficiently removing textnodes from the DOM

Solution

Problem