使用事件处理程序删除图像

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.

Answer 2

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);