+ 5
how to remove an image on button click in html???
3 odpowiedzi
+ 3
As suggested by @ValentinHacker, with JS, on click event of the targeted button, get reference of your <img> element, and remove it from the DOM... or set it 'display:none' or 'visibility:hidden' css properties/values... or only with Css, design a button with the <label> related to an invisible radio previous sibling of your image, and define one of the quoted css property/value on radio element checked (or unchecked, and made it visible in the other state):
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
#img-cmd {
display:none;
}
#img-cmd:checked+img {
display:none;
}
button>label {
display:block;
}
img {
width:80vmin;
margin:1em;
}
body, button>label {
text-align:center;
font-size:5vmin;
}
</style>
</head>
<body>
<input type="radio" id="img-cmd">
<img src="http://www.newsnish.com/wp-content/uploads/2015/01/happy-computer.jpg">
<br>
<button><label for="img-cmd">remove image</label></button>
</body>
</html>
You can do a 'toggle' button as well, by using a checkbox type <input> instead a radio ;)
https://code.sololearn.com/WA71MLneu6VN/#html
+ 8
<button onclick=elm=document.getElementsByTagName("img")[0];elm.parentNode.removeChild(elm)>Image Remover</button>
+ 5
thanks u both☺☺☺
Często masz takie pytania?
Ucz się bardziej efektywnie, za darmo:
Popularne dzisiaj
Pig Latin
0 Votes
Someone can help me
0 Votes
Please rate my code from 1 to 10
2 Votes
Square Roots
0 Votes
What's wrong with this?
2 Votes
I’m new someone can help me
0 Votes