PDA

View Full Version : Troubles with document.getElementById with more DIV's



wbaas
04-08-2009, 04:07 PM
In a page with multiple lines, I try to implement functionality that makes it possible to delete any line.

The lines are in HTML created by a table that contains one row.

When this table is inside a DIV with an ID, the JavaScript function with document.getElementById works just fine.

However when this DIV is inside another DIV the script doesn't work anymore. Apparently document.getElementById doesn't identify the DIV when it is enclosed in another one.

How to solve this problem? DIV's in DIV's is of course necessary in the page. Thanks in advance!

Code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>

<script>

function deleteElement2(obj) {
var elObj = document.getElementById(obj);
document.body.removeChild(elObj);
}

</script>

</head>

<body>

<div id="30" >
<table border="1">
<tr>
<td width="100">30</td>
<td width="100">example</td>
<td width="100">that</td>
<td width="100">does</td>
<td width="100">work</td>
<td><a href="javascript:;" onclick="deleteElement2('30')">delete this row</a></td>
</tr>
</table>
</div>

<br>

<div id="content">

<div id="31" >
<table border="1">
<tr>
<td width="100">31</td>
<td width="100">example</td>
<td width="100">that</td>
<td width="100">doesn't :-( </td>
<td width="100">work</td>
<td><a href="javascript:;" onclick="deleteElement2('31')">delete this row</a></td>
</tr>
</table>
</div>

</div> <!-- end of content div -->

</body>
</html>