title: Removing images using event handlers
body: <p>I really can't figure out how to solve this problem. Here is the question and the original code.</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <pre><code>function setup() {
    **//IM SUPPOSED TO PUT MY CODE ONLY IN THIS PART//**
  }
  
  // Example case. 
  document.body.innerHTML = `
  &lt;div class="image"&gt;
    &lt;img src="firstimage.jpg" alt="First"&gt;
    &lt;button class="remove"&gt;X&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="image"&gt;
    &lt;img src="secondimage.jpg" alt="Second"&gt;
    &lt;button class="remove"&gt;X&lt;/button&gt;
  &lt;/div&gt;`;
  
  setup();
  
  document.getElementsByClassName("remove")[0].click();
  console.log(document.body.innerHTML);
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>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 = `
  &lt;div class="image"&gt;
    &lt;img src="firstimage.jpg" alt="First"&gt;
    &lt;button class="remove"&gt;X&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="image"&gt;
    &lt;img src="secondimage.jpg" alt="Second"&gt;
    &lt;button class="remove"&gt;X&lt;/button&gt;
  &lt;/div&gt;`;
  
  setup();
  
  document.getElementsByClassName("remove")[0].click();
  console.log(document.body.innerHTML);
  </code></pre>