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 reason why the first image is removed automatically before you even click on it is because of the document.getElementsByClassName("remove")[0].click(); which is directly under the setup() function call. Which means as soon as the function is called to perform the task, document.getElementsByClassName("remove")[0].click(); is immediately performed and removes the first image using index 0 and click(). So to solve this, try removing that [0] index or remove document.getElementsByClassName("remove")[0].click(); which is not useful in your case, and see how it goes.

function setup() {
    let myImage = document.querySelectorAll(".remove").forEach(function (button){
        button.addEventListener('click', function(){
            button.parentElement.remove()
        })
    });
}
    
// 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").click();
console.log(document.body.innerHTML);