The HTML I am trying to parse with Puppeteer looks something like this:

<ul>
    <li class="title"> item 1 </li>
    <li class="title hide"> item 1 </li>
</ul>

And I am accessing the li elements like this:

await page.$$eval("ul > li.title", nodes =>
    nodes.map(element => {
      return {
        //some attributes
      };
    })
  );

The oute extended is to only retrieve elements without class=hide. Unfortunately hide is a class that's in addition to title, which is shared by all <li> elements.

How can I refactor the Puppeteer code to exclude elements with hide class?

The HTML I am trying to parse with Puppeteer looks something like this:

<ul>
    <li class="title"> item 1 </li>
    <li class="title hide"> item 1 </li>
</ul>

And I am accessing the li elements like this:

await page.$$eval("ul > li.title", nodes =>
    nodes.map(element => {
      return {
        //some attributes
      };
    })
  );

The oute extended is to only retrieve elements without class=hide. Unfortunately hide is a class that's in addition to title, which is shared by all <li> elements.

How can I refactor the Puppeteer code to exclude elements with hide class?

• javascript
• css
• node.js
• google-chrome-devtools
• puppeteer

2 Answers 2

:not(.hide)

You should use the :not() CSS pseudo-class to select elements that do not include the class .hide:

await page.$$eval('ul > li.title:not(.hide)', nodes =>
  nodes.map(element => {
    return {
      // some attributes
    };
  })
);

.filter(e => !e.matches('.hide'))

On the other hand, you can also filter() your nodes to only include the elements that are not matches() of the .hide selector string:

await page.$$eval('ul > li.title', nodes =>
  nodes.filter(e => !e.matches('.hide')).map(element => {
    return {
      // some attributes
    };
  })
);

Just add :not(.hide) to your selector string:

page.$$eval("ul > li.title:not(.hide)", nodes =>