<!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>