Dynamically remove TD using javascript.

[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.. ?

[xNephilimx]

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:

function remove(parent,child){
    var p = document.getElementById(parent);
    var c = document.getElementById(child);
    p.removeChild(c);
}
 

The HTML code:
[HTML]
<table id="firstTbl" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr id="firstTr">
<td id="firstTd"><span onclick="remove('firstTr','firstTd');">Remove me</span></td>
<td id="secondTd"><span onclick="remove('firstTr','secondTd');">Remove 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]

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

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
}
 

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