Skip to content

Instantly share code, notes, and snippets.

@atnbueno
Last active August 22, 2023 04:29
Show Gist options
  • Save atnbueno/ba9a0790524b29160a325014545c28ab to your computer and use it in GitHub Desktop.
Save atnbueno/ba9a0790524b29160a325014545c28ab to your computer and use it in GitHub Desktop.
A userscript to delete page elements when clicked twice while pressing Alt, Control, and Shift simultaneously
// ==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);
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment