Javascript: delete a node (removechild ).

Assume that DIV contains the following content:

<Div id = "content">
<H1> 1 <H1> 2 <H1> 3 <H1> 4 <H1> 5 <H1> 6 </Div>

Now we need to clear them through the JavaScript function.

Although you can useCodeDirect implementation:

Document. getelementbyid ("content"). innerhtml = ""

However, this article mainly discusses the removechild function.

I would like to think that the following code can be used:

<SCRIPT type = "text/JavaScript">
Function cleartext (){
VaR content = Document. getelementbyid ("content ");
For (VAR I = 0; I <content. childnodes. length; I ++ ){
VaR childnode = content. childnodes [I];
Content. removechild (childnode );
}
}
</SCRIPT>
<Div id = "content">
<H1> 1 <H1> 2 <H1> 3 <H1> 4 <H1> 5 <H1> 6 </Div>
<Button onclick = "cleartext ();"> clear node content </button>

Unexpectedly, after clicking the button, only 1, 3, and 5 were cleared, while 2, 4, and 6 did not disappear, but were still displayed on the page.

After a step-by-step study, we found that the for loop in the code above is equivalent to executing the following six sentences:

1. content. removechild (content. childnodes [0]); Delete 1st nodes
2. content. removechild (content. childnodes [1]); Delete 2nd nodes
3. content. removechild (content. childnodes [2]); Delete 3rd nodes
4. content. removechild (content. childnodes [3]); Delete 4th nodes
5. content. removechild (content. childnodes [4]); Delete 5th nodes
6. content. removechild (content. childnodes [5]); Delete 6th nodes

The problem arises from the very beginning:

After the first node is deleted, the sequence of the subsequent nodes changes: the original second node goes forward and becomes the new first node; the original third node, become the second node ......

So the next step is to delete the second node, but delete the original third node.

Finally, not all are deleted. Only 1, 3, and 5 are deleted, and 2, 4, and 6 are left.

The syntax is correct, but the expected result is not obtained.AlgorithmThe above error! How can I fix it?

If "sequential deletion" is not available, delete it in reverse order. Modify the for statement as follows:

For (VAR I = content. childnodes. Length-1; I> = 0; I --)

Try it. It's successful!

<SCRIPT type = "text/JavaScript">
Function cleartext (){
VaR content = Document. getelementbyid ("content ");
For (VARI = content. childnodes. Length-1; I> = 0; I --){
VaR childnode = content. childnodes [I];
Content. removechild (childnode );
}
}
</SCRIPT>
<Div id = "content">
<H1> 1 <H1> 2 <H1> 3 <H1> 4 <H1> 5 <H1> 6 </Div>
<Button onclick = "cleartext ();"> clear node content </button>

In fact, it is not necessarily in reverse order. Method 2:

<SCRIPT type = "text/JavaScript">
Function cleartext (){
VaR content = Document. getelementbyid ("content ");
For (VAR I = 0; I <content. childnodes. length; I ++ ){
VaR childnode = content. childnodes [ 0 ]; // Always Delete the first one, is it simpler?
Content. removechild (childnode );
}
}
</SCRIPT>
<Div id = "content">
<H1> 1 <H1> 2 <H1> 3 <H1> 4 <H1> 5 <H1> 6 </Div>
<Button onclick = "cleartext ();"> clear node content </button>

 

Go to: http://wangpfsir.blog.163.com/blog/static/67963727201043002658424/