如何获取删除按钮以处理这段代码

Question

This is an exercise from a test.

I need to get the remove button working. I don't understand why the line

document.getElementsByClassName("remove")[0].click();

is there either

Here is the code

function setup() {
  // Write your code here.
}

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

setup();

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

Edit: The expected output is that the remove button would remove the parent div (class="image")

Answer 1

It doesn't work because the "remove' button doesn't have a callback function for the click event defined for it.

Also, this: document.getElementsByClassName("remove")[0] should not be used as it causes a live node list to be created only to throw away that node list for just the first item in it. Instead, document.querySelector(".remove") should be used. See this other post of mine for details on this.

So, if we add a click event handler and clean up your code it will work:

 function setup() { // Write your code here. // This will set up a callback function for when the remove button gets clicked: theRemoveButton.addEventListener("click", function(){ console.log("You clicked the remove button!"); this.closest(".image").remove(); }); } // Example case. document.body.innerHTML = ` <div class="image"> <img src="someimage.jpg" alt="First"> <button class="remove">X</button> </div> <div class="image"> <img src="someimage.jpg" alt="Second"> <button class="remove">X</button> </div>`; var theRemoveButton = document.querySelector(".remove"); setup(); theRemoveButton.click(); // Forces the click event to fire on the button console.log(document.body.innerHTML); 

Answer 2

I can't understand your problem but the

document.getElementsByClassName("remove")[0].click();

line simulate a click on the first element of the with a css class called "remove", so it's useless because no event are attached to this element. I think the addEventListener function is what your looking for.