Puppeteer - 按类删除元素答案

【问题标题】：Puppeteer - Removing elements by classPuppeteer - 按类删除元素
【发布时间】：2020-06-28 01:30:20
【问题描述】：

我尝试按类名删除元素，但它不起作用。

这是我使用的代码：

await page.screenshot({path: 'pic.png'});   //for testing purposes
    let div_selector_to_remove= ".xj7.Kwh5n";
    var thingToRemove = document.querySelectorAll(div_selector_to_remove);
    var number_of_elements = thingToRemove.length;
    for (var i = 0; i < number_of_elements.length; i++) {
        thingToRemove[i].parentNode.removeChild(thingToRemove);
    }

浏览器加载，我得到一个加载元素的屏幕截图。什么都没有发生。元素保留在那里

【问题讨论】：

你如何测试它们没有被删除？您之前正在制作屏幕截图。您确定在评估代码时元素存在吗？你试过调试 thingToRemove 吗？
我使用了一个非无头版本的 puppeteer。我可以看到铬中的元素仍然存在。
demo of something similar to what you're attempting

标签： javascript node.js puppeteer

【解决方案1】：

在page.evaluate 内运行document.querySelector。这是我的答案：

await page.goto('<url_here>');
let div_selector_to_remove= ".xj7.Kwh5n";
await page.evaluate((sel) => {
    var elements = document.querySelectorAll(sel);
    for(var i=0; i< elements.length; i++){
        elements[i].parentNode.removeChild(elements[i]);
    }
}, div_selector_to_remove)

【讨论】：

再一次……你救了我……非常感谢。我是 puppeteer 的新手，我还没有真正掌握 page.evaluate()。

【解决方案2】：

首先，number_of_elements 是数字。

但是你打电话给number_of_elements.length。

接下来，thingToRemove[i].parentNode.removeChild(thingToRemove)、thingToRemove[i].parentNode 是 thingToRemove[i] 的父级，而不是 thingToRemove，

所以您不能从thingToRemove[i].parentNode 中删除thingToRemove。

我认为这段代码可能有用。

await page.screenshot({path: 'pic.png'});   //for testing purposes
let div_selector_to_remove= ".xj7.Kwh5n";
var thingToRemove = document.querySelectorAll(div_selector_to_remove);
var number_of_elements = thingToRemove.length;
for (var i = 0; i < number_of_elements; i++) {
    thingToRemove[i].parentNode.removeChild(thingToRemove[i]);
}

【讨论】：