Element Remover Bookmarklet

Bookmarklet Link

Code

							
// insert html elements
document.body.insertAdjacentHTML("afterbegin",
    `
		<div class="bookmarklet" id="bookmarklet-div" style="display:block;  position:fixed; right:0%; bottom:5%; z-index:1000; background-color: rgb(168, 217, 100); border: solid gray 1px; padding:0.3rem; font-size:14px;">
			<p class="bookmarklet" id="bookmarklet-p" style="border: solid black 0.5px; padding-left: 0.5rem; color:black; background-color: white; max-width:25vw; margin-bottom: 0.3rem; line-height:1.1rem;">
                Current Element:
			</p>
			<button class="bookmarklet" id="bookmarklet-undo" style="background-color:rgb(241, 239, 239); color:black; border:solid black 0.5px; margin-right: 0.5rem; font-size: 16px;" onMouseOver="this.style.backgroundColor='rgb(198, 195, 195)'" onMouseOut="this.style.backgroundColor='rgb(241, 239, 239)'">
                Undo
			</button>
			<button class="bookmarklet" id="bookmarklet-end" style="background-color:rgb(241, 239, 239); color:black; border:solid black 0.5px; margin-right: 0.5rem; font-size: 16px;" onMouseOver="this.style.backgroundColor='rgb(198, 195, 195)'" onMouseOut="this.style.backgroundColor='rgb(241, 239, 239)'">
                End
			</button>
		</div>
    `
);

const endButton = document.querySelector("button#bookmarklet-end");
const undoButton = document.querySelector("button#bookmarklet-undo");
const buttonDiv = document.querySelector("div#bookmarklet-div");
const p = document.querySelector("p#bookmarklet-p");

document.body.addEventListener("click", handleClick);
document.body.addEventListener("mouseover", handleMouseover);

// mouseover handler
function handleMouseover(event) {
    if (event.target !== document.body && event.target.getAttribute("class") !== "bookmarklet") {
        event.stopPropagation();
        let text = 'CURRENT ELEMENT: ' + event.target.tagName + ', \nINNER TEXT: ' + event.target.outerText.slice(0, 50).replace(/(\r\n|\n|\r)/gm, "") + '...';
        p.innerText = text;
    }
}

// click handler
let lastRemoved = null;
let lastParent = null;
let lastPrevSibling = null;
let lastNextSibling = null;
function handleClick(event) {
    let id = event.target.getAttribute("id");
    if (event.target !== document.body && event.target.getAttribute("class") !== "bookmarklet") {
        event.stopPropagation();
        event.preventDefault();

        lastRemoved = null;
        lastParent = null;
        lastPrevSibling = null;
        lastNextSibling = null; 

        lastRemoved = event.target;
        if (lastRemoved.parentElement) {
            lastParent = lastRemoved.parentElement;
        }
        if (lastRemoved.previousSibling) {
            lastPrevSibling = lastRemoved.previousSibling;
        } else if (lastRemoved.nextSibling) {
            lastNextSibling = lastRemoved.nextSibling;
        }
        
        event.target.remove();
    }
}

// on end button click remove buttons and terminate element removal 
endButton.addEventListener("click", () => {
    document.body.removeEventListener("click", handleMouseover);
    buttonDiv.remove();
});

// on undo button click re-inserts the last removed element 
undoButton.addEventListener("click", () => {
    if (lastNextSibling && lastParent) {
        lastParent.insertBefore(lastRemoved, lastNextSibling);
    } else if (lastParent && lastPrevSibling && lastPrevSibling.nextSibling) {
        lastParent.insertBefore(lastRemoved, lastPrevSibling.nextSibling);
    } else if (lastParent && lastPrevSibling || lastParent) {
        lastParent.appendChild(lastRemoved);
    }
    lastRemoved = null;
    lastParent = null;
    lastPrevSibling = null;
    lastNextSibling = null; 
});
Element Remover Bookmarklet

Bookmarklet Link

Code

Tested Websites
