Solved

AJAX + DOM (JavaScript) ClearText function

Posted on 2007-11-30
7
732 Views
Last Modified: 2013-11-19
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 ??
0
Comment
Question by:mychel_normandeau
  • 5
  • 2
7 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20382990
Perhaps because FF is standards compliant and does not view the row as a valid child of a span?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20383038
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 20383102
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
ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

 

Author Comment

by:mychel_normandeau
ID: 20383121
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
 

Author Comment

by:mychel_normandeau
ID: 20383282
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
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 500 total points
ID: 20387215
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20423112
Why a "B" ?
0

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how can i test my code? 1 36
how i fix Remove render-blocking JavaScript 3 54
jquery datepciker end date add 6 days 6 36
Hide cell in a table 2 12
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question