試一試 - CSS display

<!DOCTYPE html>
<html>
<head>
<style>
.imgbox {
    float: left;
    text-align: center;
    width: 120px;
    height: 145px;
    border: 1px solid gray;
    margin: 4px;
    padding: 0;
}

.thumbnail {
    width: 110px;
    height: 90px;
    margin: 3px;
}

.box {
    width: 110px;
    padding: 0;
}
</style>
</head>
<body>

<div style="text-align:center">
  <div style="width:394px;height:160px;margin-left:auto;margin-right:auto;text-align:left;border:1px solid gray;">
    <div class="imgbox" id="imgbox1">Box 1<br>
      <img class="thumbnail" src="klematis_small.jpg" width="107" height="90" alt="Klematis">
      <input class="box" type="button" onclick="removeElement()" value="Remove">
    </div>
    <div class="imgbox" id="imgbox2">Box 2<br>
      <img class="thumbnail" src="klematis2_small.jpg" width="107" height="90" alt="Klematis">
      <input class="box"  type="button" onclick="changeVisibility()" value="Hide">
    </div>
    <div class="imgbox">Box 3<br>
      <img class="thumbnail" src="klematis3_small.jpg" width="107" height="90" alt="Klematis">
      <input class="box"  type="button" onclick="resetElement()" value="Reset All">
    </div>
  </div>
</div>

<script>
function removeElement() {
    document.getElementById("imgbox1").style.display = "none";
}

function changeVisibility() {
    document.getElementById("imgbox2").style.visibility = "hidden";
}

function resetElement() {
    document.getElementById("imgbox1").style.display = "block";
    document.getElementById("imgbox2").style.visibility = "visible";
}
</script>

</body>
</html>