How to give a function to an image while in a website

Question

So I have a button that makes an image appear on a website when you click it. I want to make that image delete itself when its clicked. Is there any way I can do that? I tried:

function show_image(onclick) {
  var img = document.createElement("img");
  img.onclick = onclick;
}

show_image('delete()');

function delete() {
  style.display = 'none';
}

but that doesn't work.

Answer 1

You can use node.remove :

 let img = document.getElementById("img"); img.onclick = () => img.remove(); 

 <img src="img.jpg" id="img"> 

Answer 2

  const img = document.querySelector('img') document.querySelector('button').onclick = () => { img.style.display = 'block' } document.querySelector('img').onclick = () => { img.style.display = 'none' } 

 <button> show img </button> <img src='./border.png' />