CODEWITHSUNDEEP
javascriptevent-handlingdom-events
Ayechan_San
Ayechan_San

Reputation: 175

Removing images using event handlers

I really can't figure out how to solve this problem. Here is the question and the original code.

Question: Implement the setup function that registers a click event handler and implements the following logic: When the button of class remove is clicked, its parent element should be removed from the gallery.

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

This is what I have. As soon as I run the program, it removes the first image without the user clicking on it. And I have no idea how to fix it.

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

Upvotes: 4

Views: 4498

Answers (3)

krishna bokefod
krishna bokefod

Reputation: 1

    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;

Upvotes: -1

ROGER NIYOMUGABO
ROGER NIYOMUGABO

Reputation: 1

The reason why the first image is removed automatically before you even click on it is because of the document.getElementsByClassName("remove")[0].click(); which is directly under the setup() function call. Which means as soon as the function is called to perform the task, document.getElementsByClassName("remove")[0].click(); is immediately performed and removes the first image using index 0 and click(). So to solve this, try removing that [0] index or remove document.getElementsByClassName("remove")[0].click(); which is not useful in your case, and see how it goes.

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

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 371193

The getElementsBy* methods return HTMLCollections, which can be difficult to work with. Consider using querySelectorAll instead, which returns a static NodeList - unlike an HTMLCollection, it can be iterated over directly, it won't change while it's being iterated over, and it's much more flexible.

You want to iterate over each element, which is a lot more elegant than assigning to each element in the collection individually, so try something like this instead:

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

.remove removes an element from the DOM.

Upvotes: 3

Related Questions