Q:

javascript dom event ignored by the browser

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

A:

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)

