0

Hi all,

I am looking for a method to make a html element empty (no innerHTML). This would be pretty easy if it weren't for IE. IE has the bug that innerHTML is read-only for tables (and some other elements too). So my function

function clearElement(id){
	document.getElementById(id).innerHTML = "";
}

doesn't work on tables (and I need it to work on tables).

Would there be any other way for me to do this in a way as general as possible. I don't want to bother with 2 different functions for what is essentially the same task and I'm curious how this could be solved in a nice way.

3
Contributors
3
Replies
7
Views
7 Years
Discussion Span
Last Post by Graphix
0
<html>
	<head>
		<title>Clear Page</title>
		
		<script type="text/javascript">
		
			  function clearElement(id)
			  {
   				   document.getElementById(id).innerHTML = "";
   		      }
			  
			  function clearFormElement(id)
			  {
   				   document.getElementById(id).value = "";
   		      }
		
		</script>
	</head>
	<body onload="javascript:clearElement('welcome'); clearFormElement('inputbox');">
		
		<div id='top'> MAIN TITLE </div>
		
		<!-- PAGE CONTENT -->
		<div id='welcome'> WELOCME MESSAGE CLEAR </div>
		
		
		<!-- FORM ELEMENT -->
		
		<form name="test">
			
			<input type="text" name="inputbox" id="inputbox" value=" CLEAR MESSAGE ">
			
		</form>
	</body>
</html>
0

Thanks for the reply, but I don't really see how that would help with tables.

The result I want to have is this.

Before clearElement("tableId"):

<table id="taleId">
<tr>
<td>content 1</td>
<td>content 2</td>
</tr>
</table>

After clearElement("tableId"):

<table id="tableId">
</table>

So basically, after calling clearElement, I want all rows from the specified table removed. in opera, ff, chrome it works perfectly with innerHTML. In IE, innerHTML can't get the job done.

0

It doesn't work in IE because you have neglected to add doctype and such. I also think the script is not very well written.... Here is a better one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Formtest</title>
		<script type="text/javascript">
		function clearElement(id)
		{
   			document.getElementById(id).innerHTML = "";
   		}
			  
		function clearFormElement(id)
		{
   			document.getElementById(id).value = "";
   		}
			  
		function hideElement(id)
		{
			var hideElement = document.getElementById(id);
			hideElement.style.visibility = "hidden";
		}
		
		function unhideElement(id)
		{
			var hideElement = document.getElementById(id);
			hideElement.style.visibility = "visible";
		}
		
		</script>
</head>
<body>

	<a href="#" onclick="clearElement('myForm')">Delete the form (it can not be undeleted: gone=gone)</a><br />
	<a href="#" onclick="hideElement('myForm')">Hide the form</a><br />
	<a href="#" onclick="unhideElement('myForm')">Unhide the form</a><br />
	<a href="#" onclick="clearFormElement('myInput')">Clear the input box value</a><br />
		
	<!-- The form -->
		
	<form action="" id="myForm" name="myForm">
			
		<input size="30" type="text" name="myInput" id="myInput" value="This is a value of my input" />
			
	</form>
</body>
</html>

~G

Edited by Graphix: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.