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

Question

我真的无法想出如何解决这个问题。以下是问题和原始代码。

问题：实现setup函数，注册一个点击事件处理程序，并实现以下逻辑：当类名为remove的按钮被点击时，它的父元素应从图库中删除。

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

这是我的程序。一运行，它就会自动删除第一张图片，而不需要用户点击。我不知道该如何解决这个问题。

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

- Ayechan_San

Answer 1

getElementsBy*方法返回的是HTMLCollection，使用起来可能会比较麻烦。考虑使用querySelectorAll代替，它返回一个静态的NodeList - 与HTMLCollection不同，可以直接迭代它，它在迭代过程中不会发生变化，并且更加灵活。

您想要遍历每个元素，这比逐个分配给集合中的每个元素更加优雅，因此请尝试像这样做：

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

.remove 从文档对象模型中移除一个元素。

- CertainPerformance

Answer 2

第一张图片在您甚至点击它之前被自动删除的原因是因为document.getElementsByClassName("remove")[0].click();直接位于setup()函数调用下面。 这意味着一旦调用函数执行任务，document.getElementsByClassName("remove")[0].click();立即执行并使用索引0和click()删除第一张图片。 因此，要解决此问题，请尝试删除[0]索引或删除document.getElementsByClassName("remove")[0].click();，因为在您的情况下没有用处，然后查看结果。

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

- ROGER NIYOMUGABO

Answer 3

    import React from 'react';
import {useState} from 'react';

const ImageGallery = ({links}) =>{
const [data,setData] = useState(links)
const removeElement = (removeElement) => {
    const newsetdata = data.filter((index) => index !== removeElement);
    setData(newsetdata);
    console.log(newsetdata)
    // setData(data.splice(index,1));
};

  return (
    <>
      <div>      
        {
          data.map((abc,i,data)=> {           
          return(
              <div key={i}> 
                  <img src={abc} alt="images"/> 
                  <button onClick={() => removeElement(data[i])}>X
                  </button>
              </div>
            
            )             

          })
        }
    </div>
    </>
  )
}
export default ImageGallery;

- krishna bokefod

---

仅代码答案 - sideshowbarker