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

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?

Answers


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'.


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

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

Need Your Help

Ajax form with both file and text inputs

ajax upload form-data

I'm trying to create an ajax upload form that sends both a file and a text input.