AJAX + DOM (JavaScript) ClearText function

I have a JavaScript function that removes all the child nodes of the specified element (el).

I use it this way:
ClearText(document.getElementById("item2"));

HTML looks like this:
<table>
<th>
<td>Header</td>
</th>

<span id="item1">
<tr>
<td>1</td>
</tr>
</span>

<span id="item2">
<tr>
<td>2</td>
</tr>
</span>

<span id="item3">
<tr>
<td>3</td>
</tr>
</span>

</table>

Function looks like this:

function ClearText(el)
{
    if (el != null)
    {
        if (el.childNodes)
        {
            for (var i = 0; i < el.childNodes.length; i++)
            {
                var childNode = el.childNodes[i];
                el.removeChild(childNode);
            }
        }
    }
}

Everything works well in IE7 but don't work in Firefox... what's wrong ??
mychel_normandeauAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Perhaps because FF is standards compliant and does not view the row as a valid child of a span?
0
Michel PlungjanIT ExpertCommented:
This works (notice the removed whitespace


<table border="1">
<th>
<td>Header</td>
</th>
<tr id="item1">
<td>1</td>
</tr>
<tr id="item2"><td>2</td></tr>
<tr id="item3">
<td>3</td>
</tr>
</table>
 
<script>
function ClearText(el)
{
    if (el != null)
    {
        if (el.childNodes)
        {
            for (var i = 0; i < el.childNodes.length; i++)
            {
                var childNode = el.childNodes[i];
                el.removeChild(childNode);
            }
        }
    }
}
 
ClearText(document.getElementById("item2"));
</script>

Open in new window

0
Michel PlungjanIT ExpertCommented:
And one that ignores the whitespace

http://www.dustindiaz.com/easier-dom-walking-with-cleanwhitespace/

<table border="1">
<th>
<td>Header</td>
</th>
<tr id="item1">
<td>1</td>
</tr>
<tr id="item2">
<td>2</td>
</tr>
<tr id="item3">
<td>3</td>
</tr>
</span>
 
</table>
 
<script>
 
var notWhitespace = /\S/;
function cleanWhitespace(node) {
  for (var x = 0; x < node.childNodes.length; x++) {
    var childNode = node.childNodes[x]
    if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
// that is, if it's a whitespace text node
      node.removeChild(node.childNodes[x])
      x--
    }
    if (childNode.nodeType == 1) {
// elements can have text child nodes of their own
      cleanWhitespace(childNode)
    }
  }
}
 
function ClearText(el) {
  if (el != null &&  el.childNodes) {
    cleanWhitespace(el)
    for (var i = 0; i < el.childNodes.length; i++) {
      el.removeChild(el.childNodes[i]);
    }
  }
}
 
ClearText(document.getElementById("item2"));
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mychel_normandeauAuthor Commented:
mplungjan: what have you done exactly ? I removed the <span></span> and used the id on the <tr> instead, but still don't work...
0
mychel_normandeauAuthor Commented:
Ok, it "works with cleanWhitespace but it's not doing what i've expected... In my table I have many cols per row, and now it only delete the first one.

I want to clear the whole row...
0
Michel PlungjanIT ExpertCommented:
Delete or hide?




<script type="text/javascript">
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('tb0').deleteRow(i);
}
</script>
<table id="tb0">
<tr id="tr0">
<td id="tc0">Row 0 cell 0</td>
<td id="tc1">Row 0 cell 1</td>
<td id="tc2">Row 0 cell 2</td>
</tr>
<tr id="tr1" onClick="this.style.display='none'">
<td id="tc0">Row 1 cell 0</td>
<td id="tc1">Row 1 cell 1</td>
<td id="tc2">Row 1 cell 2</td>
</tr>
<tr id="tr2" onClick="deleteRow(this)">
<td id="tc0">Row 2 cell 0</td>
<td id="tc1">Row 2 cell 1</td>
<td id="tc2">Row 2 cell 2</td>
</tr>
</table>

Open in new window

0
Michel PlungjanIT ExpertCommented:
Why a "B" ?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.