I have a node/puppeteer script that visits a page, finds a specific div with a class, and takes a screenshot of the div. However, there are elements/nodes on the page that I'd like to delete before capturing the screenshot since they are interfering with the image, but can't seem to find the documentation on how to do so.

This is what I have so far, but can't figure out when or how to delete a given div with a specific class .ce45 for instance:

await page.setViewport({
    width: 1368,
    height: 768
});
await page.waitForSelector(`.${url.id.toLowerCase()}`).then(() => console.log('scraped', url.id.toLowerCase()));        
const component = await page.$(`.${url.id.toLowerCase()}`);     
const bounding_box = await component.boundingBox();  
await component.screenshot({
   path: `./${url.id.toLowerCase()}.png`,
   clip: {
      x: bounding_box.x,
      y: bounding_box.y,
        width: Math.min(bounding_box.width, page.viewport().width),
        height: Math.min(bounding_box.height, page.viewport().height),
   }
});

I have tried:

await page.evaluate((sel) => {
  let div_selector_to_remove = ['.ce45', '.d20', '.cc27'];
  for(sel of div_selector_to_remove){
     document.querySelector(`${sel}`).remove();
  }
});

but get the error Cannot read properties of null (reading 'remove')