Slack Draft Deleter

slack_draft_deleter.js

// Remove all drafts from your drafts view
// Navigate to drafts
// F12 to raise dev console
// Paste the below
(async function(x) {
    for (let e = document.querySelector('[type="trash"]'); e != null; e = document.querySelector('[type="trash"]')) {
        e.click(); 
        await new Promise(resolve => setTimeout(resolve, 500))
        document.querySelector('[data-qa="drafts_page_draft_delete_confirm"]').click();
        await new Promise(resolve => setTimeout(resolve, 1500))
    }
})();

It doesn't seem to be rejected for me. Slack uses virtualized lists so even if you have 50+ drafts it will only render about 12-15 or so on the page at a time. When you do document.querySelectorAll('[type="trash"]') it only gets those 12-15 elements to delete. Just re-run until you're empty or wrap your script in another function that re-runs your function till document.querySelectorAll('[type="trash"]') returns an empty list.

This is my solution to the virtualized list problem.

(async function(x) {
   while(true) {
       for (const e of [...document.querySelectorAll('[type="trash"]')]) {
          e.click(); 
          await new Promise(resolve => setTimeout(resolve, 500))
          document.querySelector('[data-qa="drafts_page_draft_delete_confirm"]').click();
          await new Promise(resolve => setTimeout(resolve, 1500))
      }
  }
})();

// my contribution -- removes the final timeout and just spams slack -- helpful for if on bad wifi

(async function(x) {
    for (const e of [...document.querySelectorAll('[type="trash"]')]) {
        e.click(); 
        await new Promise(resolve => setTimeout(resolve, 500))
        document.querySelector('[data-qa="drafts_page_draft_delete_confirm"]').click();
        // await new Promise(resolve => setTimeout(resolve, 1500))
    }
})();

not all drafts are loaded on the screen at one time so you have modify the code like so:

(async function(x) {
    for (let e = document.querySelector('[type="trash"]'); e != null; e = document.querySelector('[type="trash"]')) {
        e.click(); 
        await new Promise(resolve => setTimeout(resolve, 500))
        document.querySelector('[data-qa="drafts_page_draft_delete_confirm"]').click();
        await new Promise(resolve => setTimeout(resolve, 1500))
    }
})();

Instead of using the iterator, we run the selector again in every loop so we catch the new elements as they load in.

Updated OP with yiblet's improvement.

Don't know if just me (I'm awful at JS) but I was getting a Uncaught SyntaxError: Unexpected identifier 'document' when I tried to run it. Since I stink at JS (see previous), I asked GPT and it said the semicolons were missing from both setTimeouts.

Again, could be I had something set wrong in my Chrome console (on Mac Chrome), but like an obedient servant to my robot overlords, I put the semicolors in, tried again and, boom! worked.

Here's what I ran, only delta is the two semi-colons:

(async function(x) { 
  for (let e = document.querySelector('[type="trash"]'); e != null; e = document.querySelector('[type="trash"]')) { 
    e.click(); await new Promise(resolve => setTimeout(resolve, 500));
    document.querySelector('[data-qa="drafts_page_draft_delete_confirm"]').click(); 
    await new Promise(resolve => setTimeout(resolve, 1500));
  } 
})();

If I'm stating something obvious to everyone, my apologies. Intentions were pure. JS knowledge, not so much.

Thank you to everyone who contributed. I'd built up 110 drafts in Slack and it was going to drive me crazy clearing 'em out.