Question

这是来自测试的练习。

我需要使删除按钮正常工作。我不明白为什么会这样

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

有没有

这是代码

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

编辑：预期的输出是，删除按钮将删除父div（class =“ image”）

Answer 1

它不起作用，因为“删除”按钮没有为其定义的click事件的回调函数。

此外，不应使用document.getElementsByClassName("remove")[0]，因为它会导致创建活动节点列表，而只是丢弃其中的第一项该节点列表。而是应使用document.querySelector(".remove")。有关详情，请参见此other post of mine。

因此，如果我们添加一个click事件处理程序并清理您的代码，它将可以正常工作：

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

我无法理解您的问题，但

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

line使用名为“ remove”的css类模拟对第一个元素的单击，因此它没有用，因为没有事件附加到该元素。我认为addEventListener函数正是您想要的。

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

2 个答案: