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

Question

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?

score 94 · Accepted Answer · answered Jun 13 '12 at 14:58

94

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

answered Jun 13 '12 at 14:58

trumank

2,564
2
21
30

this successfully removes the header, any idea how to also remove the cells beneath it? – daniel langer Jun 13 '12 at 15:01
@daniellanger That gets more complicated. – trumank Jun 13 '12 at 15:08
Can I somehow append the element like this? `var html = "my dynamic element"+newTH+"WOW!"; other_el.innerHTML = html;` – Qwerty Jan 20 '14 at 00:01

score 15 · Answer 2 · edited Apr 30 '16 at 13:13

15

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

edited Apr 30 '16 at 13:13

Ahmed Hegazy

12,051
5
36
62

answered Jun 13 '12 at 14:50

Someth Victory

4,322
2
21
27

thanks, that creates the event! any ideas as to a simple way to hide that element within the function? It doesn't have an ID or class which makes it a bit difficult – daniel langer Jun 13 '12 at 14:56
@daniellanger Look at my answer. – trumank Jun 13 '12 at 15:01

score 10 · Answer 3 · answered Feb 22 '20 at 17:01

10

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

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

answered Feb 22 '20 at 17:01

Arthur Choate

403
4
19

score 9 · Answer 4 · answered Jun 13 '12 at 14:52

9

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

answered Jun 13 '12 at 14:52

Sirko

69,531
19
142
174

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

4 Answers4

Linked