Dynamically remove TD using javascript.

**xNephilimx** · Jul 13 '07, 03:03 PM

Originally posted by mrbadboy

Hi,

How to remove TD dynamically using javascript. I've mentioned below my code.

<table id="firstTbl" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr id="firstTr">
<td id="firstTd"> </td>
<td id="secondTd"> </td>
</tr>
</table>

I need to remove "firstTd" from the table..

Can help me anybody.. ?

This question doesn't belong here, it belongs to he javascript forum. Hopefully it'll be moved. Anyway, to achieve what you want you should use some really simple DOM scripting. This is one way to do it, but is far from being the only way.

First you should decide what will trigger the td elimination, in this case I used a span that will trigger it, so that span has an onclick event that will trigger the function that must be passed with two parameters, the parent element and the child element, in this case the parent element would be the firstTr tr and the child elements would be the firstTd and the secondTd tds.

The JS function:
[CODE=javascript]
function remove(parent,c hild){
var p = document.getEle mentById(parent );
var c = document.getEle mentById(child) ;
p.removeChild(c );
}
[/CODE]

The HTML code:
[HTML]
<table id="firstTbl" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr id="firstTr">
<td id="firstTd"><s pan onclick="remove ('firstTr','fir stTd');">Remove me</span></td>
<td id="secondTd">< span onclick="remove ('firstTr','sec ondTd');">Remov e me too</span></td>
</tr>
</table>
[/HTML]

As you can see, it's very very simple, I don't know the complexity of what you're trying to do, may be, if you're trying something complex you'll have to investigate a little more on DOM scripting, but I'm sure this simple script will serve almost all your purposes.

Best regards

**Romulo NF** · Jul 13 '07, 05:32 PM

Code:

<table id="anyId">
	<thead>
		<tr>
			<td>HEAD 1</td>
			<td>HEAD 2</td>
			<td>HEAD 3</td>
			<td>HEAD 4</td>
			<td>HEAD 5</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>BODY A 1</td>
			<td>BODY A 2</td>
			<td>BODY A 3</td>
			<td>BODY A 4</td>
			<td>BODY A 5</td>
		</tr>
		<tr>
			<td>BODY B 1</td>
			<td>BODY B 2</td>
			<td>BODY B 3</td>
			<td>BODY B 4</td>
			<td>BODY B 5</td>
		</tr>
		<tr>
			<td>BODY C 1</td>
			<td>BODY C 2</td>
			<td>BODY C 3</td>
			<td>BODY C 4</td>
			<td>BODY C 5</td>
		</tr>
	</tbody>	
</table>

Code:

function deleteOnClick(table) {
	this.table = document.getElementById(table)
	this.rows = this.table.getElementsByTagName("tr")
	
	for (x=0; x<this.rows.length; x++) {
		this.rows[x]._tr = this
		this.rows[x].onclick = function() {
		this._tr.remover(this)
		}
	}
}

deleteOnClick.prototype.remover = function(obj) {
	var confirmation = confirm("This will delete the row: " + "\n" + obj.innerHTML + "\n" + "Do you want to proceed?")
		confirmation ? obj.parentNode.removeChild(obj) : null
}

Code:

new deleteOnClick('anyId')

You can try this way so you dont have to pass an ID to each tr and call events directly from the tags

Dynamically remove TD using javascript.

Dynamically remove TD using javascript.

Comment

Comment