Member Avatar for crebilis

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
  • 164 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Graphix
Member Avatar for alagirinetaxis 
<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>
Member Avatar for crebilis

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.

Member Avatar for Graphix

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 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.