Chat Message Remover

Question

Script

See a chat message you don't want on your screen? An annoying image or animated GIF? Now you can remove it!

This is a simple script that I made. It will allow you to click a chat message to remove it. That's all! Here's the code:

javascript:function f(){$('.content').each(function(i){$(this).click(function g(e){this.innerHTML='<i>removed</i>';$('.content').each(function(i){$(this).unbind('click');});});});}$('#footer-logo').click(function g(e){e.preventDefault();f();});

When you run it once, by pasting it into the address bar (your browser might remove the javascript: part so type it back in if it does) or using a bookmarklet, it is easy to remove messages. Simply click on the stack overflow logo at the bottom right corner of your screen, then click the message you want to remove.

Answer 1

The following is a 2021 update for the script. The core idea is the same to honor the original script, but there are several differences:

1. Added a Del shortcut for entering delete mode
2. No external dependencies used (rewritten without jQuery)
3. Works with both text messages and those that contain inline code

The new version can be used directly as a snippet or a userscript and as a bookmarklet by prepending the javascript: pseudo-protocol to the compiled code.

TypeScript source:

interface MouseEvent {
  readonly target: HTMLElement | null;
}

((_w, d) => {
    const makeReplacement = () => {
        const replacer = d.createElement('i');
        replacer.textContent = 'removed';
        return replacer;
    };

    const initRemoving = () => {
        d.addEventListener(
            'click',
            ({ target }) => {
                if (!target) return;
                const { classList, tagName } = target;
                if (!classList.contains('content') && tagName !== 'CODE') return;
                while (target.firstChild) target.firstChild.remove();
                target.append(makeReplacement());
            },
            { once: true }
        );
    };

    d.addEventListener('keyup', (event) => {
        const { ctrlKey, metaKey, shiftKey, key } = event;

        if (shiftKey || ctrlKey || metaKey) return;

        const shortcutMap: { [x: string]: () => void } = {
            DELETE: initRemoving,
        };

        const handler = shortcutMap[key.toUpperCase()];
        return handler && handler();
    });

    d.addEventListener('click', (event) => {
        const { target } = event;
        if (!target || !target.matches('img[src*=logo]')) return;
        event.preventDefault();
        return initRemoving();
    });
})(window, document);

Minified compiled JavaScript (transpiled version pending):

"use strict";(r=>{const i=()=>{r.addEventListener("click",({target:e})=>{if(e){const{classList:t,tagName:n}=e;if(t.contains("content")||"CODE"===n){for(;e.firstChild;)e.firstChild.remove();e.append((()=>{const e=r.createElement("i");return e.textContent="removed",e})())}}},{once:!0})};r.addEventListener("keyup",e=>{const{ctrlKey:t,metaKey:n,shiftKey:r,key:s}=e;if(!(r||t||n)){const c={DELETE:i}[s.toUpperCase()];return c&&c()}}),r.addEventListener("click",e=>{const{target:t}=e;if(t&&t.matches("img[src*=logo]"))return e.preventDefault(),i()})})((window,document));