Click all elements matching a CSS selector via Chrome DevTools console

Clicking all trash buttons on a page of GitHub stale branches

Click all CSS-selected elements without jQuery

I sometimes need to click all elements on a webpage, for instance to:

• Delete stale branches on GitHub
• Delete recruiter messages on LinkedIn

I struggled to do this without using jQuery, but now found a way, using chrome’s built-in $$ operator:

Here the CSS selector is button[aria-label=\"Delete branch\"], but it can of course be whatever you need:

$$("button[aria-label=\"Delete branch\"]").map(e => e.click())

What can you use this for?

Quickly clean up stale branches on Github

• Go to a Github repos stale branches pages, eg. https://github.com/[handle]/[repo]/branches/stale
• Run $$("button[aria-label=\"Delete branch\"]").map(e => e.click())
• Click next page
• Repeat until you have deleted as much as you want

Best, Søren