JSFiddle - React, Tailwind, and code Playground

HTML

<!-- test -->
<button id="btnListComments">List all comments</button>
<button id="btnDelComments">Delete all comments (re-click first button to see difference!)</button>

<br />

<ul id="ulComments">
</ul>
<!--
  another test

-->

CSS

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin-left: 2em;
}

JavaScript

// Polyfill for IE < 9
if (!Node) {
    var Node = {};
}
if (!Node.COMMENT_NODE) {
    // numeric value according to the DOM spec
    Node.COMMENT_NODE = 8;
}

function getComments(elem) {
  var children = elem.childNodes;
  var comments = [];
  
  for (var i=0, len=children.length; i<len; i++) {
    if (children[i].nodeType == Node.COMMENT_NODE) {
      comments.push(children[i]);
    }
  }
  return comments;
}
function removeAllComments(elem) {
  var comments = getComments(elem);
  
  for (var i=0, len=comments.length; i<len; i++) {
    comments[i].parentNode.removeChild(comments[i]);
  }
}
window.addEventListener("load", function () {
  var $ulComments = document.getElementById("ulComments");
  document.getElementById("btnListComments").onclick = function () {
    var comments = getComments(document.body);
    
    var html = "";
    for (var idx in comments) {
      html += "<li>" + comments[idx].data + "</li>";
    }
    $ulComments.innerHTML = html;
  };
  
  document.getElementById("btnDelComments").onclick = function () {
    removeAllComments(document.body);
  };
});