3

How can I get an array or array-like (JQuery object) containing all the comment elements in the DOM? JQuery contents() only retrieve 1 level elements.

The broader problem: I need to remove all the elements between 2 text comments in my DOM. Comments can also be in child elements.

...html code...
<!--remove from here-->
...code...
<!--finish removing-->
...html code...

So after the method, HTML DOM should look like:

...html code...
...html code...

Thanks.

mrgoos
  • 1,294
  • 14
  • 26

1 Answers1

5

You can use TreeWalker with whatToShow set to NodeFilter.SHOW_ALL to see all nodes on your document.

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ALL,
  null,
  false
);

var commentList = [];

while (treeWalker.nextNode()){
  // keep only comments
  if (treeWalker.currentNode.nodeType === 8) 
    commentList.push(treeWalker.currentNode);
}

var node;
while (node !== commentList[1]) {
  node = commentList[0].nextSibling;
  node.parentElement.removeChild(node);
}
<!--Folowing element will be deleted-->
<span> Hello world</span>
<!-- the next one should be kept -->
<span> keep me !</span>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
  • 1
    the deletion part will only work with the given structure : delete everything between two comments if there is only two of them. You may need to check whether those are the good ones or not. – Kaiido Aug 12 '15 at 13:21
  • I admit that I haven't heard of that yet :) I see that it's pretty well cross browser supported so it's good. Is it more efficient than removing text from the innerHtml with RegEx? Thanks a lot! – mrgoos Aug 12 '15 at 13:38
  • It's way more efficient yes ! see [this piece of history](http://stackoverflow.com/a/1732454/3702797). Also, TreeWalker is really powerful, definitely give it a try. – Kaiido Aug 12 '15 at 13:40
  • BTW - even better for my case is to use the filter: "SHOW_COMMENT" and remove the nextSibling of the target comment until the next target comment || null. – mrgoos Aug 12 '15 at 14:11