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 102 · Accepted Answer · answered Jun 13 '12 at 14:58

102

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,704
3
22
31

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
I think when/the reason many end up on this page is when/because THIS does NOT work for whatever reason. ... – LuckyLuke Skywalker Feb 01 '23 at 16:51

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

17

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

513
5
20

score 15 · Answer 3 · 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,395
5
41
64

answered Jun 13 '12 at 14:50

Someth Victory

4,492
2
23
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

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

10

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

answered Jun 13 '12 at 14:52

Sirko

72,589
19
149
183

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

4 Answers4

Linked