How to delete a div when selecting any image on page using addEventListener (Javascript)?

Question

My assignment requires me to generate a picture with words on it. It also requires me to have it deleted when clicked. I have got it to generate the picture and words to work, however I can't delete the div wrapper when the child image is clicked.

I understand I could create the addEventListener to delete the div when the div is clicked, however my div currently expands to the entire row. I was able to make the div the size of the image, however I couldn't get the meme library to look presentable. With a better understanding of css positioning, grid, flexbox, etc. I am sure I could make it work but right now, I need to move on with my course! Why is my code not allowing me to delete the meme when the image is clicked? Also, if anyone knows how to correctly center the "click to delete" hover text, I will would be VERY grateful!

const form = document.querySelector('#addmeme');
const imageUrl = document.querySelector('#imageurlinput');
const topTextInput = document.querySelector('#tptextinput');
const bottomTextInput = document.querySelector('#btmtextinput');
const submitBtn = document.querySelector('#submitbutton');
const images = document.getElementsByTagName('img');

form.addEventListener('submit', function(e) {
    // prevent website change
    e.preventDefault();
    // create new meme div and append as child to new meme library
    const newMeme = document.createElement('div');
    const memeLibrary = document.querySelector('#memeLibrary');
    newMeme.classList.add("meme");
    memeLibrary.appendChild(newMeme);
    // create img element. add class and the image's URL to the img
    const memeImage = document.createElement('img');
    memeImage.classList.add("memepic");
    memeImage.src = imageUrl.value;
    newMeme.appendChild(memeImage);
    // create div for the toptext of meme and add class and innterHTML of user's input
    const topText = document.createElement('div');
    topText.classList.add("toptext");
    topText.innerHTML = topTextInput.value;
    newMeme.appendChild(topText);
    // create div for the text when user hovers over the image
    const hoverText = document.createElement('div');
    hoverText.classList.add("hoverText");
    hoverText.innerHTML = "Click to Delete";
    newMeme.appendChild(hoverText);
    // create div for the bottom text of meme and add class and innterHTML of user's input
    const bottomText = document.createElement('div');
    bottomText.classList.add("bottomtext");
    bottomText.innerHTML = bottomTextInput.value;
    newMeme.appendChild(bottomText);
    // clear the input fields
    imageUrl.value = '';
    topTextInput.value = '';
    bottomTextInput.value = '';
})

// delete meme when clicked
images.addEventListener("click", function(e) {
    e.target.parentElement.remove();
  })

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');


body{
    background-color: #E1EFE6;
    margin: 0px;
}

#title{
    text-align: center;
    color: #000411;
    font-family: 'Poppins', 'Roboto';
    font-size: 3em;
    margin: 20px 0px 0px 0px;
}

#instructions{
    text-align: center;
    color: #000411;
    font-family: 'Roboto';
    font-size: 1em;

}

.userinputsection{
    margin: 20px auto;
    width: 500px;
}
.userinputsection input{
    display: inline-block;
    text-align: left;
    float: right;
    width: 360px;
}

.userinputsection label{
    display: inline-block;
    text-align: right;
    font-family: 'Roboto';
    font-size: 1em;
}

#submitbuttondiv{
    margin: 10px auto;
    display: inline-block;
}

#submitbutton{
    font-family: 'Roboto';
}

#memeLibrary{
    display: flexbox;
    padding: 5px;
    background-color: white;
    height: 100%;
    width: 100%;
}

.meme{
    position: relative;
    max-width: 400px;
    margin: 10px auto;
    

}

.memepic{
    max-width: 400px;
    border-radius: 10px;
    border-width: 1px 0px 0px 1px;
    border-color: lightgray;
    border-style: solid;
    box-shadow: 5px 5px 2px lightgrey;
    opacity: 1;

}

.memepic:hover{
    opacity: 0.5;
    transition: .5s ease;
}

.toptext{
    position: absolute;
    color: white;
    -webkit-text-stroke: 2px black;
    font-size: 2em;
    font-family: Impact;
    width: 100%;
    text-align: center;
    top: 0px;
    margin-top: 10px;
}

.memepic:hover ~ .toptext{
    -webkit-text-stroke: 2px gray;
    transition: .5s ease
}


.bottomtext{
    position: absolute;
    color: white;
    -webkit-text-stroke: 2px black;
    font-size: 2em;
    font-family: Impact;
    width: 100%;
    text-align: center;
    bottom: 0px;
    margin-bottom: 10px;
}

.memepic:hover ~ .bottomtext{
    -webkit-text-stroke: 2px gray;
    transition: .5s ease
}

.hoverText{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    color: black;
    font-size: 2em;
    font-family: Poppins;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    top: 50%;
    margin: 0;
    padding: 0;
}

.memepic:hover ~ .hoverText{
    visibility: visible;
    opacity: 1;
    transition: .5s ease;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Meme Generator</title>
  <link rel="stylesheet" href="Meme.css">
</head>

<body>
    <h1 id="title">Meme Generator</h1>
    <h1 id="instructions">Fill out the form below to create memes!</h1>
<form action = "" id="addmeme" name="addmeme">
    <div class="userinputsection">
        <label for="imageurlinput">Image URL</label>
        <input type="text" name="imageurlinput" id="imageurlinput"></br>
    </div>
    <div class="userinputsection">
        <label for="tptextinput">Text on Top</label>
        <input type="text" name="tptextinput" id="tptextinput"></br>
    </div>
    <div class="userinputsection">
        <label for="btmtextinput">Text on Bottom</label>
        <input type="text" name="btmtextinput" id="btmtextinput"></br>
    </div>
    <div id="submitbuttondiv">
        <input type="submit" id="submitbutton" value="Create Meme!"></br>
    </div>
</form>
<div id="memeLibrary">
    <div class="meme">
        <img class="memepic" src="https://cdn.jpegmini.com/user/images/slider_puffin_before_mobile.jpg" alt="Puffin">
        <div class="toptext">THIS IS THE TOP TEXT</div>
        <div class="hoverText">Click to delete</div>
        <div class="bottomtext">THIS IS THE BOTTOM TEXT</div>
    </div>
    <div class="meme">
        <img class="memepic" src="https://dickinsoncountyconservationboard.com/wp-content/uploads/sites/2/2019/01/Common_Snapping_Turtle_36290540871-1024x767.jpg" alt="Puffin">
        <div class="toptext">THIS IS THE TOP TEXT</div>
        <div class="hoverText">Click to delete</div>
        <div class="bottomtext">THIS IS THE BOTTOM TEXT</div>
    </div>
</div>

  <script src=Meme.js></script>
</body>
</html>

Answer 1

You can't add listeners to a NodeList:

// getElementsByTagName returns a NodeList
const images = document.getElementsByTagName('img');

// blows up
images.addEventListener("click", function(e) {
  e.target.parentElement.remove();
})

You could, however, iterate over the items and add a listener to each entry:

const images = document.getElementsByTagName('img');

images.forEach(img => img.addEventListener("click", function(e) {
  e.target.parentElement.remove();
}))