I want to use vanilla JS to remove the parent element of the button I'm pressing on click

Question

I created a meme generator that accepts text and images and puts them all together. The generator creates a unique ID for each 'meme' and also adds buttons that show up on hover to "delete" the meme. I used vanilla JS to create this and therefore had to layer a few different child divs on top of one another: image, top text, bottom text using z-index.

I am struggling, however, to get the button to delete the parent div. I want to be able to click that delete button, and have the parent div deleted so that the button goes away, along with image and text. picture below + code snippets.

I attemped to do it with vanilla javascript, by adding a closeTheMeme function on click to each button:

        let deleteBtns = document.getElementsByClassName('.delete');

        function closeTheMeme (){
            this.parentElement.parentElement.removeChild();
        };

        for(let i=0;i<deleteBtns.length;i++){
            deleteBtns[i].addEventListener("click",closeTheMeme);
        }

No errors on console...Including the rest of the JS below so you can see how the elements are created on click of the meme generator.

'use strict';



let count=0;


// SUBMIT FORM
document.getElementById('memeInput').addEventListener('submit',function(e){
    count++;

    //prevent default
    e.preventDefault();

    //set image, top, and bottom to variables we can work with
    let bottomText = document.getElementById('bottomText').value;

    createMeme();

    
})


function createMeme(){
        //create a meme section with an ID of the number of times the button was clicked, and add it to the meme section
        
        let meme = document.createElement("DIV");
        document.body.appendChild(meme);
        meme.setAttribute("id", "meme"+count);

        //create an image, set that image to equal the link, give it an id based on form submits, set image.src equal to the link 
        let img = document.createElement("IMG"); 
        img.setAttribute("id","image"+count);
        let imageLink = document.getElementById('imageLink').value;
        meme.appendChild(img);
        document.getElementById("image"+count).src=imageLink;  

        //set top text variable equal to the ID of toptext. value(form submission)
        let topText = document.getElementById('topText').value;
        let top = document.createElement('DIV');
        top.setAttribute("id","topText"+ count);
        meme.appendChild(top);
        top.innerHTML = topText;

        //set bottom text variable equal to the ID of toptext.value form submission
        let bottomText = document.getElementById('bottomText').value;
        let bottom = document.createElement('DIV');
        bottom.setAttribute("id","bottomText" + count);
        meme.appendChild(bottom);
        bottom.innerHTML = bottomText;

        //add a button that deletes the meme in the same way as above
        let deleteButton = document.createElement("BUTTON");
        deleteButton.classList.add("delete");
        deleteButton.innerHTML = "Delete";
        meme.appendChild(deleteButton);

        //styling and position
        meme.classList.add("meme");
        top.classList.add("topWords");
        bottom.classList.add("bottomWords");

        };



        let deleteBtns = document.getElementsByClassName('.delete');

        function closeTheMeme (){
            this.parentElement.parentElement.removeChild();
        };

        for(let i=0;i<deleteBtns.length;i++){
            deleteBtns[i].addEventListener("click",closeTheMeme);
        }

`removeChild()` requires a node to remove ... `this.parentElement.parentElement.removeChild(this.parentElement)` or just `this.parentElement.remove()` will do — Bravo, Aug 02 '21 at 01:31
You are adding the events BEFORE the buttons are created. `let deleteBtns = document.getElementsByClassName('.delete'); console.log(deleteBtns.length);` — epascarello, Aug 02 '21 at 01:39
both of these worked in combination. thanks a LOT for your help. this was frustrating. why do I need to add the listener when i create the button? — davdev, Aug 02 '21 at 01:41

epascarello · Answer 1 · 2021-08-02T01:58:27.010

You select the buttons when the page loads. You created no buttons so it is not possible for it to work since there is nothing to bind an event to.

Since you are making the buttons, add the event there.

const deleteButton = document.createElement("BUTTON");
deleteButton.addEventListener("click", function () {
  this.closest("div").remove();
});

Other option is event delegation

document.body.addEventListener("click", function (e) {
  const btn = e.target.closest(".delete");
  if (btn) btn.closest("div").remove();
});

I want to use vanilla JS to remove the parent element of the button I'm pressing on click

1 Answers1