Add onClick event to document.createElement("th")

JavascriptHtml Table

Javascript Problem Overview


I am dynamically adding columns to a table by using document.createElement("th")

var newTH = document.createElement('th');

Is there a way to set an onClick attribute for this so a user can delete the column by clicking on the header? Any help would be great. If this is not possible, is it possible to put something in

newTH.innerHTML

to make it work?

Javascript Solutions


Solution 1 - Javascript

var newTH = document.createElement('th');
newTH.innerHTML = 'Hello, World!';
newTH.onclick = function () {
    this.parentElement.removeChild(this);
};

var table = document.getElementById('content');
table.appendChild(newTH);

Working example: http://jsfiddle.net/23tBM/

You can also just hide with this.style.display = 'none'.

Solution 2 - Javascript

var newTH = document.createElement('th');
newTH.onclick = function() {
      //Your code here
}

Solution 3 - Javascript

var newTH = document.createElement('th');
newTH.setAttribute("onclick", "removeColumn(#)");
newTH.setAttribute("id", "#");

function removeColumn(#){
// remove column #
}

Solution 4 - Javascript

var newTH = document.createElement('th');
newTH.addEventListener( 'click', function(){
  // delete the column here
} );

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questiondaniel langerView Question on Stackoverflow
Solution 1 - JavascripttrumankView Answer on Stackoverflow
Solution 2 - JavascriptSometh VictoryView Answer on Stackoverflow
Solution 3 - JavascriptArthur ChoateView Answer on Stackoverflow
Solution 4 - JavascriptSirkoView Answer on Stackoverflow