how to remove an image in javascript by clicking on it with remove method

Question

i am trying to remove image by clicking on it after i create 'img' element using createElement but i cant remove the image , whats wrong with the removes function in my code ? here is my code :

function generateCat(){
  var image = document.createElement('img')
  var div = document.getElementById('flex-cat-gen');
  image.src= ('image.jpg');
  div.appendChild(image);
}

document.getElementsByTagName('img').onclick =  function removes() {
  document.getElementsByTagName('img').remove();
}

`getElementsByTagName` returns a `HTMLCollection`, not a single element. You'll have to loop over each element and bind an event listener to it. And in the event handler remove every single image — Emiel Zuurbier, May 08 '20 at 13:27

Shubham Dixit · Accepted Answer · 2020-05-08T13:31:42.220

0

You should try like this.You have to add an Eventlistener for click event.Also see document.getElementsByTagName(),

Method returns a live HTMLCollection of elements with the given tag name

function generateCat() {
  var image = document.createElement('img')
  var div = document.getElementById('flex-cat-gen');
  image.src = ('https://cdn.nikkiflower.com/assets/uploads/product_image/114/small/1575008384_0.jpg');
  div.appendChild(image);


  let tags = document.getElementsByTagName('img');
  for (let i = 0; i < tags.length; i++) {
    tags[i].addEventListener("click", function() {

      this.remove()

    })

  }
}

<div id="flex-cat-gen">
</div>

<button class="btn btn-warning" onclick="generateCat()">Generat Cat</button>

edited May 08 '20 at 13:31

answered May 08 '20 at 13:26

Shubham Dixit

9,242
4
27
46

this is my html : so i dont have to add eventlistner – amir May 08 '20 at 13:31
thank u now its working – amir May 08 '20 at 13:39
Please accept the answer if it worked @amir – Shubham Dixit May 08 '20 at 13:41

how to remove an image in javascript by clicking on it with remove method

1 Answers1