Can anyone provide insight into the issue with these scripts? I am attempting to remove an input when it is clicked. The input is of type image, so CSS cannot be used. I have tried using JavaScript but it doesn't seem to be working.
HTML
<!doctype html>
<link rel="stylesheet" href="styles.css">
<title>Site Maintenance</title>
<body>
<article>
<div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="a.js"></script>
<img src="logo.png" alt="logo">
<div id="button1"><a href="#button1" id="w"><input class="do-hide" onclick="window.open('http://www.website.com/page')" type="image" src="button.png" /></div>
<div id="1button2"><a href="#button2" id="b"><input class="do-hide" type="image" id="button2" src="button1.png" /></a></div>
<div id="1button3"><a href="#button3" id="c"><input class="do-hide" type="image" id="button3" src="button3.png" /></a></div>
<div id="1button4"><a href="#button4" id="d"><input class="do-hide" type="image" id="button4" src="button5.png" /></a></div>
<div id="1button5"><a href="#button5" id="e"><input class="do-hide" type="image" id="button5" src="button4.png" /></a></div>
</div>
</article>
</body>
JS
$('body').on('click','a.do-hide',function(event) {
event.preventDefault();
var href = $(this).attr('href');
$(href).hide();
});
CSS
a { display:block; }
input.hideable{
display:block;
border:1px solid #AAA;
}
.hideable:target {
display:none;
}
body { text-align: center; padding: 150px; background-image: url("b.png"); }
body { font: 20px Helvetica, sans-serif; color: #666a73; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
#button1 {
height: 50px;
width: 250px;
position: absolute;
left: 300px;
top: 500px;
opacity: 0.6;
}
#button1:hover {
width: 270px;
height: 60px;
}
#w:target {
display: none;
}
#button2 {
height: 50px;
width: 250px;
position: absolute;
left: 600px;
top: 500px;
opacity: 0.6;
}
#button2:hover {
width: 270px;
height: 60px;
}
#b:target {
width: 0px;
height: 0px;
}
#button3 {
height: 50px;
width: 250px;
position: absolute;
left: 900px;
top: 500px;
opacity: 0.6;
}
#button3:hover {
width: 270px;
height: 60px;
}
#c:target {
width: 0px;
height: 0px;
}
#button4 {
height: 50px;
width: 250px;
position: absolute;
left: 1200px;
top: 500px;
opacity: 0.6;
}
#button4:hover {
width: 270px;
height: 60px;
}
#d:target {
width: 0px;
height: 0px;
}
#button5 {
height: 50px;
width: 250px;
position: absolute;
left: 1500px;
top: 500px;
opacity: 0.6;
}
#button5:hover {
width: 270px;
height: 60px;
}
#e:target {
width: 0px;
height: 0px;
}
img {
position: absolute;
left: 520px;
top: 100px;
opacity: 0.9;
}