Remove an Element between Comments from Webpage using JS

Question

I am trying to Gather Data from this Webpage :

https://www.biharjobportal.com/bihar-police-constable-bharti/

I managed to Remove all GoogleAds from the Website using this Code Since it has a Class name, so its easy:

 var theaders = document.getElementsByClassName('adsbygoogle');
for (var i=theaders.length-1; i >=0; i--)
{
    theaders[i].parentElement.removeChild(theaders[i]);
}

But the webpage has this Element with No IDS, class name etc.. (see screenshot pls):

I only know that the Element to Remove is between these Comments:

     <!-- WP QUADS Content Ad Plugin v. 2.0.17  -->

    **codes to remove (as in the picture)**

    <!-- WP QUADS Content Ad Plugin v. 2.0.17  -->

I tried to remove all such items using XPATH, but nothing happened, this is the code i Wrote :

    var badTableEval = document.evaluate (
    "/html/body/div[1]/div/div[1]/main/article/div/div/ul[3]",
    document.documentElement,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null
);

if (badTableEval  &&  badTableEval.singleNodeValue) {
    var badTable  = badTableEval.singleNodeValue;
    badTable.parentNode.removeChild (badTable);
}

How to remove all this element from the webpage ? https://www.biharjobportal.com/bihar-police-constable-bharti/

A few answers that relate: How do I get an HTML comment with javascript, Get content between comments — pilchard
– pilchard, Commented Nov 24, 2020 at 12:56

KooiInc · Accepted Answer · 2020-11-24 14:51:23Z

2

You can detect comments in the document this way (see snippet). ~~Now it's up to you to device some crafty function to remove elements between the comments.~~. Ok, you asked for it, including a method to remove elements between equal comments.

const root = document.querySelector("body");
const allEls = [...root.childNodes];
const IS_COMMENT = 8;

allEls.forEach((el, i) => {
  if (el.nodeType === IS_COMMENT) {
    // we have a comment. Find the (index of) next equal comment in [allEls]
    // from this point on
    const subset = allEls.slice(i + 1);
    const hasEqualNextComment = subset
      .findIndex(elss =>
        elss.nodeType === IS_COMMENT &&
        elss.textContent.trim() === el.textContent.trim());

    // if an equal comment has been found, remove every element between 
    // the two comment elements
    if (hasEqualNextComment > -1) {
      subset.slice(1, hasEqualNextComment - 1)
        .forEach(elss =>
          elss.parentNode && elss.parentNode.removeChild(elss));
    }
  }
});

body {
  font: normal 12px/15px verdana, arial;
  margin: 2rem;
}

<!-- WP QUADS Content Ad Plugin v. 2.0.17  -->
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
<!-- WP QUADS Content Ad Plugin v. 2.0.17  -->

<!-- other comment -->
<ul>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ul>
<!-- other comment: the above is kept -->

<!-- something 2 remove -->
<div>item 7</div>
<!--something 2 remove-->
<div>item 8</div>

<p>
  <b>The result should show item 4 - item 6, item 8 and the 
    text within this paragraph</b>.
  <br><i>Note</i>: this will only work for top level comments 
  within the given [root] (so, not for comments that nested 
  within elements).
  <br>Also you may have to clean multiline-comments
  from line endings for comparison.
</p>

edited Nov 24, 2020 at 14:51

answered Nov 24, 2020 at 12:58

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dani Over a year ago

Sir, can You please mention how to remove this element as well. Im quite new to JS html stuff .

Matthew Dangle Over a year ago

Try using .remove() method. If your element variable is called el, use it like this: el.remove(); There is also remove child to remove it from the parent element. parentEl.removeChild(el);.

Dani Over a year ago

nothing Happening Sir, its still ther . This is the code as you suggested Sir : const allEls = document.querySelector("body").childNodes; [...allEls].forEach(el => { if (el.nodeType == 8) { console.log(Comment detected: ${el.textContent}); el.remove(); } });

Collectives™ on Stack Overflow

Remove an Element between Comments from Webpage using JS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related