New course! Every coder should learn Generative AI!
Try a free lesson+ 5
how to remove an image on button click in html???
3 Answers
+ 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☺☺☺
Often have questions like this?
Learn more efficiently, for free:
Hot today
post your python code here)
3 Votes
Help with homework
0 Votes
please help me emotionally
1 Votes
Time
2 Votes
Logical operator
1 Votes