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?

Improve company productivity with a Business Account.Sign Up

x
 
Michel PlungjanConnect With a Mentor IT 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
 
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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 PlungjanConnect With a Mentor IT 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
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.

All Courses

From novice to tech pro — start learning today.