需要帮助使用 javascript 删除带有 X 按钮的图像

Question

我正在尝试创建一些 JavaScript，允许用户删除他们上传的图像。我一直在尝试不同的建议和方法，但似乎都不起作用。这是我的代码。

let nftImage = document.getElementById("Nft-Image");
let inputFile = document.getElementById("input-file");

inputFile.onchange = function () {
  nftImage.src = URL.createObjectURL(inputFile.files[0]);
}

body {
    background-color: seashell;
    color: palegoldenrod;
    font-family: Georgia, "Times New Roman", Times, serif;
    overflow-x: hidden;
    height: 100vh;
    width: 100%;
  }

  .TopNav {
    overflow: hidden;
    background-color: seashell;
   }

  .TopNav .Horizons {
    position: relative;
    font-size: 60px;
    font-family: Georgia, "Times New Roman", Times, serif;
    float: left;
    top: 0px;
    font-weight: bold;
    color: palegoldenrod;
  }

   .Horizons:hover {
    color: grey;
  }

  .MintingIntro {
    position: relative;
    right: -100px;
    font-size: 25px;
    text-align: center;
  }

  .NftCard {
    border: 4px solid palegoldenrod;
    height: 600px;
    width: 500px;
    position: relative;
    bottom: 40px;
    background-color: snow;
    object-fit: contain;
  }

  .NftUpload {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .Upload {
    text-align: center;
    position: relative;
    top: 50%;
    left: 32%;
    display: none;
  }

  .Upload:hover {
    color: grey;
   cursor: pointer;
 }

 .upload-file {
   text-align: center;
   position: relative;
   top: 5;
   left: 33%;
   display: block;
   border: 1px solid palegoldenrod;
   width: 140px;
   height: 30px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-weight: bold;
   font-size: 22px;
   border-radius: 10px;
   background-color: black;
   margin: 5px;
   padding: 6px;
   cursor: pointer;
  }

  .upload-file:hover {
    color: grey;
  }

  .Customization {
    border: 2px solid floralwhite;
     position: relative;
     float: right;
    height: 520px;
   width: 850px;
   top: -540px;
   text-align: center;
   }

 .NameCustom {
    padding-bottom: 80px;
   }

 .NameIn {
   font-size: 19px;
  }

.NameInput {
  background-color: snow;
  color: black;
  border-radius: 0%;
  font-size: 17px;
  position: relative;
  bottom: -30px;
  left: -190px;
  border: 1px solid black;
}

.SupplyIn {
 font-size: 19px;
}

.SupplyInput {
  background-color: snow;
  color: black;
  border-radius: 0%;
  font-size: 17px;
  bottom: -30px;
  position: relative;
  left: -140px;
  border: 1px solid black;
}

.SupplyCustom {
  padding-bottom: 80px;
 }

.DescriptionIn {
  font-size: 19px;
  position: relative;
  top: -90px;
  z-index: 5;
  right: -195px;
}

.DescriptionInput {
 background-color: snow;
  color: black;
  border-radius: 0%;
  font-size: 17px;
  bottom: -30px;
  left: -158px;
 position: relative;
   width: 600px;
  height: 200px;
   border: 1px solid black;
 }

.TraitsIn {
  font-size: 19px;
  position: relative;
  top: 20px;
  z-index: 5;
  right: -195px;
}

.close {
  z-index: 5;
 font-size: 30px;
 color: black;
  background-color: transparent;
  border: 1px solid snow;
  position: absolute;
  right: 1px;
  top: 1px;
  cursor: pointer;
 }

  .close:hover {
    color: grey;
}

<div class="TopNav">
         <a
          href="http://127.0.0.1:5500/styles/HorizonsMarketplaceFrontEnd2.html"
           target="_self"
           class="Horizons"
           >H</a
         >
         <div class="ProfilePort">
           <i class="fa-solid fa-circle-user fa-2xl" style="color: #f1e598"></i>
         </div>
         <div class="profilePort"></div>
       </div>
       <div>
       <h1 class="MintingIntro">Create NFT</h1>
      </div>

      
       <!--This is where my button and images are placed. Basically allowing a user to upload an image and then delete it when they want to with the X button in the corner.-->

      <div class="NftCard">
        <button class="close" onclick="closeButton">&times;</button>
        <img src="images/nft.png" id="Nft-Image" class="NftUpload" />
         <label class="upload-file" for="input-file">Update File</label>
         <input
          class="Upload"
          type="file"
          accept="img/jpeg, img/png, img/jpg"
          id="input-file"
        />
      


     </div>
      <div class="Customization">
       <div class="NameCustom">
         <label for="Name" class="NameIn">Name of your NFT</label>
         <input type="text" class="NameInput" name="Name" />
       </div>
       <div class="SupplyCustom">
         <label for="Supply" class="SupplyIn">Supply</label>
         <input type="text" class="SupplyInput" supply="Supply" />
        </div>
        <div class="DescriptionCustom">
          <label for="Description" class="DescriptionIn">Description</label>
          <input type="text" class="DescriptionInput" description="Description" />
        </div>
        <div class="Traits">
          <label for="Traits" class="TraitsIn">NFT Traits</label>
          <i class="fa-solid fa-plus fa-2xl"></i>
        </div>
      </div>

我是 Javascript 新手，所以我想弄清楚这一切。我相信我必须使用事件方法 click 添加一个事件侦听器？

我尝试了多种功能、addEventListeners 等，但没有任何效果。我是 javascript 新手，所以我可能搞乱了语法之类的。

Answer 1

正如 Mehdi 已经在评论中指出的那样。您可能希望在

closeButton

函数中实现删除当前选定图像文件的逻辑。 注意：以下实现假设

closeButton

函数与

inputFile.onchange

位于同一文件中。

function closeButton(){
 nftImage.value = ""; //Reset the input selection.
 nftImage.src = ""; //Remove the image from UI.
 //Any other existing code 
}

上述实现会重置输入选择，然后将

img

标签的

src

属性重置为空字符串，以便 UI 删除之前选择的图像。