javascript dom event ignored by the browser

Question

I'm really confused, other element's onclick is working except this one,

        var chatPop = document.createElement('div'),
        chatClose = document.createElement('button');

        chatPop.classList.add('chat-pop')

        chatClose.appendChild(document.createTextNode('X'));
        chatClose.onclick = () => $c('chat-pop')[0].remove()
        chatHeader.appendChild(chatClose)
        chatPop.appendChild(chatHeader)
        document.body.appendChild(chatPop)

and the onclick event is not there

Answer 1

There are some issues you need to fix in your script.

• The chatHeader variable is undefined .
• Remove c from $c('chat-pop')[0].remove() and add . in selector, like this: $('.chat-pop')[0].remove() .
• Did you include jQuery to your html? You need JQuery to use $ function. You also can replace $('.chat-pop')[0].remove() by document.getElementsByClassName('chat-pop')[0].remove() .

var chatPop = document.createElement('div'),
    chatHeader = document.createElement('div'),
    chatClose = document.createElement('button');

chatPop.classList.add('chat-pop')
chatClose.appendChild(document.createTextNode('X'));
chatClose.onclick = () => document.getElementsByClassName('chat-pop')[0].remove()
chatHeader.appendChild(chatClose)
chatPop.appendChild(chatHeader)
document.body.appendChild(chatPop)