How can I remove an image after “blowing it up” on a webpage?

I am using this javascript to blow up an image upon click:
`
function zoomIn(event) {
var element = event.target;

                // Create a new image element for the zoomed image
                var zoomedImage = new Image();
                zoomedImage.src = element.src;
                zoomedImage.classList.add("zoomed-image");

                // Append the zoomed image to the body
                document.body.appendChild(zoomedImage);

}

            function zoomOut(event) {
            var element = event.target;
            
            // Remove the zoomed image from the page
            var zoomedImage = document.querySelector(".zoomed-image");
            if (zoomedImage && zoomedImage.parentNode === document.body) {
                zoomedImage.parentNode.removeChild(zoomedImage);
                element.removeEventListener("dblclick", zoomOut);
            }
            }`

It creates a new blown up image, but the double click won’t remove it.

I tried just using the remove.Child section, and it started removing the original images from my page, but with all the code now just nothing happens on double click.