Removing images using event handlers

Question

I really can't figure out how to solve this problem. Here is the question and the original code.

Question: Implement the setup function that registers a click event handler and implements the following logic: When the button of class remove is clicked, its parent element should be removed from the gallery.

function setup() {
  **//IM SUPPOSED TO PUT MY CODE ONLY IN THIS PART//**
}

// Example case. 
document.body.innerHTML = `
<div class="image">
  <img src="firstimage.jpg" alt="First">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="secondimage.jpg" alt="Second">
  <button class="remove">X</button>
</div>`;

setup();

document.getElementsByClassName("remove")[0].click();
console.log(document.body.innerHTML);

This is what I have. As soon as I run the program, it removes the first image without the user clicking on it. And I have no idea how to fix it.

function setup() {
    var myImage = document.getElementsByClassName("image");
    document.getElementsByClassName("remove")[0].
    addEventListener("click", function(){
    myImage[0].parentNode.removeChild(myImage[0]);}); 
}

// Example case. 
document.body.innerHTML = `
<div class="image">
  <img src="firstimage.jpg" alt="First">
  <button class="remove">X</button>
</div>
<div class="image">
  <img src="secondimage.jpg" alt="Second">
  <button class="remove">X</button>
</div>`;

setup();

document.getElementsByClassName("remove")[0].click();
console.log(document.body.innerHTML);

Answer 1

The getElementsBy* methods return HTMLCollections, which can be difficult to work with. Consider using querySelectorAll instead, which returns a static NodeList - unlike an HTMLCollection, it can be iterated over directly, it won't change while it's being iterated over, and it's much more flexible.

You want to iterate over each element, which is a lot more elegant than assigning to each element in the collection individually, so try something like this instead:

document.querySelectorAll('.remove')
  .forEach(button => 
    button.addEventListener('click', () => button.parentElement.remove())
  )

.remove removes an element from the DOM.