我想使用vanilla JS来删除我按下的按钮的父元素

问：

我创建了一个模因生成器，它接受文本和图像并将它们放在一起。生成器为每个“模因”创建一个唯一的 ID，并添加悬停时显示的按钮以“删除”模因。我使用vanilla JS来创建它，因此必须将几个不同的子div叠加在一起：图像，顶部文本，底部文本使用z-index。

但是，我正在努力获得删除父 div 的按钮。我希望能够单击该删除按钮，并删除父 div，以便该按钮与图像和文本一起消失。下图+代码片段。

我尝试使用香草 javascript 来做到这一点，通过在每个按钮上添加一个 closeTheMeme 函数：

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

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

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

控制台上没有错误...包括下面的其余 JS，这样你就可以看到元素是如何在点击模因生成器时创建的。

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