CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gmanc2
Gmanc2

Reputation: 13

jquery removing input type image

Does anyone know what the issue with these scripts are pretty much what I'm trying to do is have an input removed when you click it. It's a type image input so you can't use CSS so I've tried with java and it doesn't seem to work

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;
}

Upvotes: 1

Views: 156

Answers (2)

Brian
Brian

Reputation: 1

To hide the input you could add this

$(".do-hide").click(function(){
    $(this).hide();
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337590

Your selector is incorrect. a.do-hide looks for an <a> element with a class of do-hide. Instead you need to find the .do-hide as a child of an <a>, so you need a space between the selectors. Then you can use $(this).hide() to hide the element. Try this:

$('body').on('click', 'a .do-hide', function(event) {
  event.preventDefault();
  $(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.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>

Upvotes: 1

Related Questions