A userscript to delete page elements when clicked twice while pressing Alt, Control, and Shift simultaneously

click-to-delete.user.js

// ==UserScript==
// @name         Click to delete
// @author       Antonio Bueno
// @namespace    userscripts.atnbueno.com
// @description  This script deletes page elements if clicked twice while simultaneously pressing Alt, Control, and Shift
// @version      2.0
// @grant        none
// ==/UserScript==

/*
  - The first click marks an element to be deleted
  - A second click in a marked element deletes ALL marked elements
  - A mark can be removed by clicking without pressing all the modifier keys
  - The script does not work with the contents of an iframe
*/

(function () {
  "use strict";

  function ready(callbackFunction) {           // borrowed from
    if (document.readyState != "loading") {    // codetonics.com/javascript/detect-document-ready/
      callbackFunction(event);
    } else {
      document.addEventListener("DOMContentLoaded", callbackFunction);
    }
  }
  ready(() => {
    document.addEventListener("click", e => {         // When an element is clicked
      if (e.altKey && e.ctrlKey && e.shiftKey) {       // and all modifiers are pressed
        e.preventDefault();
        e.stopPropagation();
        if (window.getSelection) {                       // avoid accidental text selection
          window.getSelection().removeAllRanges();
        }
        if (!e.target.classList.contains("marked")) {    // mark the element if not marked
          e.target.classList.add("marked");
        } else {                                         // otherwise, delete ALL marked elements
          document.querySelectorAll(".marked").forEach(element => {
            element.remove();
          });
        }
      } else {                                         // but not with all modifiers: remove mark
        if (e.target.classList.contains("marked")) {
          e.target.classList.remove("marked");
        }
      }
    }, true);                                         // 'true' prioritizes this event listener

    var stylesheet = document.createElement("style"); // Add inline CSS for the mark
    stylesheet.textContent = `
      .marked {
        border: 2px solid red !important;
        background-color: #FF00003F !important;
      }
      .marked img {
        opacity: 0.5 !important;
      }
      .marked div {
        background-color: #FF00001f !important;
      }`;
    document.documentElement.appendChild(stylesheet);
  });

})();