Currently, I am facing the need to utilize vanilla.js in my application due to the presence of html entities retrieved from the database that require special treatment. Since the babel compilation process has already concluded, I am resorting to manipulating the DOM directly. My goal is to embed an icon within a span, and upon clicking this icon, I aim to remove the entire span element. Unfortunately, I am encountering a roadblock where, despite successfully creating the icon and defining its attributes such as fontSize, the onclick function does not seem to respond to clicks. I have experimented with various approaches including using a callback function, a vue function, but nothing seems to activate the desired event. Any suggestions on how to tackle this challenge?
icon.classList.add("material-icons", "cancel_icon")
icon.innerHTML = "cancel"
icon.style.fontSize = '14px'
icon.style.position = 'relative'
icon.style.top = '2px'
icon.style.left = '2px'
icon.onclick = () => this.removeSpan(span)
console.log(icon.onclick)
return span