Show an X over an image, instead of a remove button in image options

ui/media/css/main.css

@@ -107,6 +107,7 @@ code {
 .imgContainer {
     display: flex;
     justify-content: flex-end;
+    position: relative;
 }
 .imgItemInfo {
     padding-bottom: 0.5em;
@@ -114,16 +115,26 @@ code {
     align-items: flex-end;
     flex-direction: column;
     position: absolute;
-    padding: 5px;
+    padding-right: 5pt;
+    padding-top: 6pt;
     opacity: 0;
     transition: 0.1s all;
 }
+.imgPreviewItemClearBtn {
+    opacity: 0;
+}
 .imgContainer:hover > .imgItemInfo {
     opacity: 1;
 }
+.imgContainer:hover > .imgPreviewItemClearBtn {
+    opacity: 1;
+}
 .imgItemInfo * {
     margin-bottom: 7px;
 }
+.imgItem .image_clear_btn {
+    transform: translate(40%, -50%);
+}
 #container {
     min-height: 100vh;
     width: 100%;

ui/media/js/main.js

@@ -263,6 +263,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
                     <div class="imgItemInfo">
                         <span class="imgSeedLabel"></span>
                     </div>
+                    <button class="imgPreviewItemClearBtn image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
                 </div>
             `
             outputContainer.appendChild(imageItemElem)
@@ -275,6 +276,11 @@ function showImages(reqBody, res, outputContainer, livePreview) {
         imageElem.setAttribute('data-steps', imageInferenceSteps)
         imageElem.setAttribute('data-guidance', imageGuidanceScale)
 
+        const imageRemoveBtn = imageItemElem.querySelector('.imgPreviewItemClearBtn')
+        imageRemoveBtn.addEventListener('click', (e) => {
+            console.log(e)
+            shiftOrConfirm(e, "Remove the image from the results?", () => { imageItemElem.style.display = 'none' })
+        })
 
         const imageInfo = imageItemElem.querySelector('.imgItemInfo')
         imageInfo.style.visibility = (livePreview ? 'hidden' : 'visible')
@@ -288,7 +294,6 @@ function showImages(reqBody, res, outputContainer, livePreview) {
             imageSeedLabel.innerText = 'Seed: ' + req.seed
 
             let buttons = [
-                { text: 'Remove', on_click: onRemoveClick, class: 'secondaryButton' },
                 { text: 'Use as Input', on_click: onUseAsInputClick },
                 { text: 'Download', on_click: onDownloadImageClick },
                 { text: 'Make Similar Images', on_click: onMakeSimilarClick },
@@ -325,10 +330,6 @@ function showImages(reqBody, res, outputContainer, livePreview) {
     })
 }
 
-function onRemoveClick(req, img, event) {
-    shiftOrConfirm(event, "Remove the image from the results?", () => { findClosestAncestor(img, '.imgItem').style.display='none' })
-}
-
 function onUseAsInputClick(req, img) {
     const imgData = img.src