i want to remove one of the element which inside my table,
i try to use tr.removeChild(tr.childNodes[2]);
to remove my third row elements, but it doesn't really work
function smile()
{
document.getElementById("p1").style.backgroundImage = 'url(smile.jpg)';
}
function twice()
{
document.getElementById("p2").innerHTML="Smile Smile";
}
function empty()
{
//this is the part i want to remove , i want to remove the text inside it
tr.removeChild(tr.childNodes[3]);
}
</script>
</head>
<body>
<table border = "1" >
<form>
<tr>
<th onclick="smile()"><input type="button" name="person1" value="Make it smile!" id="person4" size="30" </th>
<th onclick="twice()"><input type="button" name="person1" value="Make it smile twice!" id="person4" size="30" </th>
<th onclick="empty()"><input type="button" name="person1" value="Make it empty" id="person4" size="30" </th>
</tr>
Couple of things:
You need to set tr inside of the empty() function, right now it isn't set to anything.
Arrays are indexed starting at 0, so you are telling it to remove the 4th child. Try changing it to:
tr.removeChild(tr.childNodes[2]);
Live demo: http://jsfiddle.net/SbDXC/
I see a couple issues with your code.
First, you need to define tr (see the demo).
Second, in a table, using rows and cells is more reliable than childNodes. To remove the third cell (index 2) of the first row (index 0), simply use:
table.rows[0].removeChild(table.rows[0].cells[2]);
The issue with childNodes is that in some browsers the line breaks will be counted as nodes.
[Edit] Even shorter: table.rows[0].deleteCell(2);