CODEWITHSUNDEEP
javascripthtml
guywhogames
guywhogames

Reputation: 41

using javascript in html to delete things when clicked

I have previously posted about this page Im trying to create and Im still running into errors. I am very new to this and getting confused. I need to use a for loop to loop over the images and assign an event listener to each one so that when they are clicked on they get deleted. Im getting confused with the difference variables and pulling the html into my javascript. I keep getting ".addEventListener is not a function" and so I keep changing things but getting lost.

<!DOCTYPE html>
<html>
  <body>
    <div id = 'img'>
    <img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img"/>
    <img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img"/>
</div>
    <script text="javascript">
    let images = document.querySelectorAll("img");
    for (let i = 0; i < images.length; i++){
  images[i].addEventListener("click", () => {
        images[i].remove();
      });
    }
    </script>
  </body>
</html>

Upvotes: 1

Views: 52

Answers (6)

njain
njain

Reputation: 157

You need to update your code, you are not using index inside loop.You cannot add any listener on directly to images array. 

<!DOCTYPE html>
<html>
  <body>
    <div id = 'img'>
    <img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img"/>
    <img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img"/>
</div>
    <script text="javascript">
    let images = document.querySelectorAll("img");
    for (let i = 0; i < images.length; i++){
  images[i].addEventListener("click", () => {
        images[i].remove();
      });
    }
    </script>
  </body>
</html>

Upvotes: 0

Vikas Dubey
Vikas Dubey

Reputation: 83

This will help you - https://jsfiddle.net/n5mk9Lzj/

let images = document.querySelectorAll("img");
for (let i = 0; i < images.length; i++) {
    images[i].addEventListener("click", function() {
        images[i].remove();
    });
}

Upvotes: 0

Jay Nyxed
Jay Nyxed

Reputation: 497

First, you have same id for your container and both of your images - ID is supposed to be unique. Second, as people already mentioned, you can not attach eventListener to array of objects. Something like this shoud do: 

let images = document.querySelectorAll("[id^='img']");
    for (let i = 0; i < images.length; i++){
  images.forEach(i=>{i.addEventListener("click", () => {
        i.remove();
        });
      });
    }
 <div id = 'box'>
    <img src="https://www.sciencemag.org/sites/default/files/styles/article_main_large/public/dogs_16x9_0.jpg?itok=byPuhQjh" id="img1"/>
    <img src="https://www.yvr.ca/-/media/yvr/blog/2018/57_yvr_puppies_2018.jpg" id="img2"/>
</div>

Upvotes: 1

akaphenom
akaphenom

Reputation: 6888

  1. you cannot attach an event handler to a list of images

  2. so loop over images and for each of them

    // for each image in images 
image.onclick = function (e) {
        e.target.parentNode.removeChild(e.target);

Upvotes: 0

ray
ray

Reputation: 27265

images.addEventListener should be images[i].addEventListener. You want to add the listener to the specific image from the array, not the array itself. Similar problem with images.remove().

Upvotes: 1

rhigdon
rhigdon

Reputation: 1521

You are accessing array directly, which won't have the addEventListener. Try images[i].addEventListener

Upvotes: 1

Related Questions