Remove all content between two comment tags using JavaScript

Question

How can I remove all content between two tags that they aren't in standard tags;

<!--googleoff: index-->
    some codes and content here...
<!--googleon: index-->

This is an ads that showing in one site and I'd like to block and remove theme in browser by User JS

Answer 1

Those are comment nodes, not tags. The best thing would probably be to identify the parent, then loop through the children; see comments:

// Assuming a single parent
let parent = document.querySelector(".stuff");
if (parent) {
    // Uncomment if you want to see nodes before the change
    // showNodes("before", parent);
    let removing = false;
    let child = parent.firstChild;
    let next = null;
    // While we still have child elements to process...
    while (child) {
        // If we're already removing, remember that
        let removeThis = removing;
        // Before we remove anything, identify the next child to visit
        next = child.nextSibling;
        // Is this a comment node?
        if (child.nodeType === Node.COMMENT_NODE) {
            if (child.nodeValue.includes("googleoff: index")) {
                // It's the node that tells us to start removing:
                // Turn on our flag and also remove this node
                removing = true;
                removeThis = true;
            } else if (child.nodeValue.includes("googleon: index")) {
                // It's the node that tells us to stop removing:
                // Turn off our flag, but do remove this node
                removing = false;
                removeThis = true;
            }
        }
        if (removeThis) {
            // This is either stuff in-between the two comment nodes
            // or one of the comment nodes; either way, remove it
            parent.removeChild(child);
        }

        // Move on to next child
        child = next;
    }
    // Uncomment if you want to see nodes before the change
    // showNodes("after", parent);
}

Live Example:

 // Brief delay so you can see it happen setTimeout(() => { // Assuming a single parent let parent = document.querySelector(".stuff"); if (parent) { // Uncomment if you want to see nodes before the change // showNodes("before", parent); let removing = false; let child = parent.firstChild; let next = null; // While we still have child elements to process... while (child) { // If we're already removing, remember that let removeThis = removing; // Before we remove anything, identify the next child to visit next = child.nextSibling; // Is this a comment node? if (child.nodeType === Node.COMMENT_NODE) { if (child.nodeValue.includes("googleoff: index")) { // It's the node that tells us to start removing: // Turn on our flag and also remove this node removing = true; removeThis = true; } else if (child.nodeValue.includes("googleon: index")) { // It's the node that tells us to stop removing: // Turn off our flag, but do remove this node removing = false; removeThis = true; } } if (removeThis) { // This is either stuff in-between the two comment nodes // or one of the comment nodes; either way, remove it parent.removeChild(child); } // Move on to next child child = next; } // Uncomment if you want to see nodes before the change // showNodes("after", parent); } }, 800); function showNodes(label, parent) { console.log(label); for (let child = parent.firstChild; child; child = child.nextSibling) { console.log(child.nodeType, child.nodeValue); } } 

 <div> Just some content that isn't related </div> <div class="stuff"> This is the parent element <!--googleoff: index--> some codes and content here... <!--googleon: index--> </div> 

If this stuff appears in more than one place, obviously wrap that in a loop.

If you can't identify the parent, you'll have to walk the DOM all the way through, which is a bit more work (recursive function), but not that bad.