javasript Javascript variable not being constant?

[QQ_cazo]

                    document.querySelector('[builder="image"]').addEventListener('click',function(e) {
                        name(e)
                    })
                    function name(e) {
                        e.preventDefault()
                        hash = Math.floor(Math.random() * (999999 - 100000) + 100000);
                        html = `<div draggable="true" style="min-height: 75px;background-color: #fff" boxid="${hash}">
                            <div close="a${hash}" class="closeBtn">X</div>
                            <img src="https://i.picsum.photos/id/237/536/354.jpg?hmac=i0yVXW1ORpyCZpQ-CknuyV-jbtU7_x9EBQVhvT5aRr0" alt="" draggable="false">
                            </div>`
                        document.querySelector('#builder').insertAdjacentHTML('beforeend',html)
                        //e = document.querySelector(`[boxid="${hash}"]`)
                        console.log(document.querySelector(`[close="a${hash}"]`))
                        document.querySelector(`[close="a${hash}"]`).addEventListener('click',function(e) {
                            console.log(hash)
                            console.log(document.querySelector(`[close="a${hash}"]`))
                            e.preventDefault()
                            parent = document.querySelector(`[close="a${hash}"]`).parentElement
                            parent.style.display = 'none'
                            parent.innerHTML = ''
                            
                            parent.remove()
                        })
                    }

 

the result im trying to get:

 I hit the "close" element, and that close function also deletes the parent.can be done many times (can create many images)

 

I cant see where im going wrong

 

My issue:

After clicking the element that creates, the close "button" works fine, but on the second close, it just says null

my console.log:

 

 

(index):235 <div close="a692218" class="closeBtn">X</div>
(index):235 <div close="a536366" class="closeBtn">X</div>
(index):234 692218
(index):235 <div close="a692218" class="closeBtn">X</div>
(index):234 692218
(index):235 null
(index):237 Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
    at HTMLDivElement.<anonymous> ((index):237:82)
(anonymous) @ (index):237
(index):234 692218
(index):235 null

 

[QQ_cazo]

i found a cheap fix, but i still cant see where i am going wrong

document.querySelector('[builder="image"]').addEventListener('click',function(e) {
	hash = Math.floor(Math.random() * (999999 - 100000) + 100000);
	name(e,hash)
})

 

[C2dan88]

This is because ${hash} is only set for when the image is added. ${hash} wont be set when the onclick event handler is triggered when you click the X.

You should use the event object passed to the onclick handler (e) to remove the parentElement instead

document.querySelector(`[close="a${hash}"]`).addEventListener('click',function(e) {
	e.target.parentElement.remove() // remove the parent element for X button that was clicked
}, { once: true }) // remove the click event automatically once clicked