jquery removing input type image

Question

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

Rory McCrossan · Accepted Answer · 2016-07-27 14:06:49Z

1

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>

answered Jul 27, 2016 at 14:06

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Gmanc2 Over a year ago

Still doesn't work for some reason, I copied the code

Rory McCrossan Over a year ago

Check the console for errors. As you can see above, it should work fine.

Gmanc2 Over a year ago

Here a fiddle link do you see any issue? Edit: Sorry wrong link jsfiddle.net/Gmanc2/3s1gztso

Gmanc2 Over a year ago

Heres the colab link jsfiddle.net/Gmanc2/3s1gztso/#&togetherjs=RidheDzxQo

Rory McCrossan Over a year ago

The code in the fiddle is working - the elements are being hidden.

|

Brian · Accepted Answer · 2016-07-27 14:22:34Z

0

To hide the input you could add this

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

answered Jul 27, 2016 at 14:22

Brian

11 bronze badge

1 Comment

Gmanc2 Over a year ago

That didn't seem to work either It works in a jsfiddle but not in chrome or ie any ideas?

Collectives™ on Stack Overflow

jquery removing input type image

2 Answers 2

12 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related