Javascript 如何在JS中隐藏图片

我试图隐藏我的网站上显示的图片。我有一个选项列表，其中我只选择了一张我想显示的图片和一个执行事件的按钮。所以我的问题是，当我按下按钮时，图片只会隐藏一小会儿（我希望它们永远消失）。我做错了什么

document.addEventListener("DOMContentLoaded", function () {

var select = document.querySelector(".form-control");
var img = document.querySelectorAll("img");
var submit = document.querySelector("button");

var imgApple = img[0];
var imgUbuntu = img[1];
var imgWindows = img[2];

submit.addEventListener("click", function () {
      if (select.value == "Windows") {
        imgApple.style.visibility = "hidden";
        imgUbuntu.style.visibility = "hidden";
      } else if (select.value == "Os X") {
        imgApple.style.visibility = "visible";
        imgUbuntu.style.visibility = "hidden";
      } else if (select.value == "Ubuntu") {
        imgApple.style.visibility = "hidden";
        imgWindows.style.visibility = "hidden";
      }
   });
});

---

而不是

style.visibility

尝试

style.display

（我也在中尝试过）

---

我希望它能有帮助。

那么你想删除它吗？sry，我的英语不好。我只想显示我在列表中选择的一张图片。请改为尝试

display:none

。看，听起来你可能正在点击按钮重新加载页面。您的按钮是表单中的还是标签为

type=submit

？

   submit.addEventListener("click", function () {

if (select.value == "Windows") {
    imgWindows.style.display= "block";
    imgApple.style.display= "none";
    imgUbuntu.style.display= "none";
} else if (select.value == "Os X") {
    imgApple.style.display= "block";
    imgUbuntu.style.display= "none";
    imgWindows.style.display= "none";
} else if (select.value == "Ubuntu") {
    imgUbuntu.style.display= "block";
    imgApple.style.display= "none";
    imgWindows.style.display= "none";
}