Question

我真的无法弄清楚如何解决这个问题。这是问题和原始代码。

问题：实现注册click事件的setup函数处理程序并实现以下逻辑：当类的按钮时单击删除，其父元素应从中删除画廊。


import from '../../both/imports/global.js';

这就是我所拥有的。只要我运行该程序，它就会删除第一张图像，而无需用户点击它。我不知道如何解决它。

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

Answer 1

getElementsBy *方法返回HTMLCollections，这可能很难处理。请考虑使用querySelectorAll，它返回一个静态NodeList - 与HTMLCollection不同，它可以直接迭代，在迭代时不会改变，而且它更灵活。

你希望迭代遍历每个元素，这比分别分配给集合中的每个元素要优雅得多，所以请尝试这样的事情：

document.querySelectorAll('.remove')
  .forEach(button => 
    button.addEventListener('click', () => button.parentElement.remove())
  )

.remove从DOM中删除元素。

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

1 个答案: