开发者问题收集

如何让删除按钮在这段代码中起作用

2019-03-14
243
javascript dom

这是测试中的练习。

我需要让删除按钮正常工作。我也不明白为什么 

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

2个回答

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

此外，不应使用以下代码： document.getElementsByClassName("remove")[0] ，因为它会导致创建实时节点列表，但只会丢弃其中第一个项目的节点列表。相反，应使用 document.querySelector(".remove") 。有关详细信息，请参阅此 我的另一篇文章 。

因此，如果我们添加 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);
Scott Marcus
2019-03-14

我不明白你的问题，但 

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

行模拟了对具有名为“remove”的 css 类的第一个元素的单击，因此它毫无用处，因为没有事件附加到此元素。 我认为 addEventListener 函数正是你要找的。

Nil
2019-03-14