delete dynamically added content when checkbox in popup.html is unchecked (manifest v3)

I am injecting a JS file and CSS when a checkbox in popup.html is checked. This works.

    d.addEventListener("click", async () => {
    let [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true
    });

    chrome.storage.local.set({
        landmarks: d.checked
    }, function () {

        if (d.checked) {

            try {
                chrome.scripting.insertCSS({
                    target: {
                        tabId: tab.id,
                        allFrames: true
                    },
                    files: ["css/show-alt-text.css"],
                });
            } catch (err) {
                console.error(`failed to insert CSS: ${err}`);
            }

            (async () => {
                const [tab] = await chrome.tabs.query({
                    active: true,
                    currentWindow: true
                });
                try {
                    await chrome.scripting.executeScript({
                        target: {
                            tabId: tab.id,
                            allFrames: true
                        },
                        files: ["js/show-alt-text.js"],
                    });
                } catch (erri) {
                    console.error(`failed to execute script: ${erri}`);
                }
            })();

        } else {

            try {
                chrome.scripting.removeCSS({
                    target: {
                        tabId: tab.id,
                        allFrames: true
                    },
                    files: ["css/show-alt-text.css"],
                });
            } catch (err) {
                console.error(`failed to remove CSS: ${err}`);
            }

            document.querySelectorAll(".show-alt-text").forEach(altName => altName.remove());
        }
    });
});

The script loops through all the img elements on the page and positions a DIV with a class under each image:

Injected JS

const imgElements = document.querySelectorAll("img");
const showAltText = document.createElement("div");
showAltText.classList.add("show-alt-text");

for (let i = 0; i < imgElements.length; i++) {
    const altText = imgElements[i].alt;
    const element = showAltText.cloneNode(true);
    if (altText !== "") {
        element.innerHTML = "This image ALT text is: " + altText;
        imgElements[i].after(element);
    }
}

If the checkbox is unchecked the style sheet is removed. I also want to remove the injected DIV.

If I add the following JS to Chrome tools the DIV is removed.

document.querySelectorAll(".show-alt-text").forEach(altName => altName.remove());

However, if I use this in the else (unchecked) section of the popup.js, it does not work.

Can someone offer any help on getting this to work please.

Answer

Fixed

Don’t declare as var, let or const.

imgElements = document.querySelectorAll(“img”); showAltText = document.createElement(“div”);