Comments: JavaScript can be used to delete all nodes. This article mainly discusses the removeChild function. You can see the following example to assume that div contains the following content:
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK">
<Title> iScroll demo: simple </title>
<Script type = "text/javascript">
Function deleteData (){
}
</Script>
<Style type = "text/css" media = "all">
Body, ul, li {
Padding: 0;
Margin: 0;
Border: 0;
}
Body {
Font-size: 12px;
-Webkit-user-select: none;
-Webkit-text-size-adjust: none;
Font-family: helvetica;
}
</Style>
</Head>
<Body>
<Div> <input type = "submit" name = "button" id = "button" value = "delete li node" class = "button gray" onclick = "deleteData () "/> </div>
<Div>
<Ul id = "thelist">
<Li> Pretty row 1 </li>
<Li> Pretty row 2 </li>
<Li> Pretty row 3 </li>
<Li> Pretty row 4 </li>
<Li> Pretty row 5 </li>
<Li> Pretty row 6 </li>
<Li> Pretty row 7 </li>
<Li> Pretty row 8 </li>
<Li> Pretty row 9 </li>
<Li> Pretty row 10 </li>
<Li> Pretty row 40 </li>
</Ul>
</Div>
</Body>
</Html>
Now we need to clear them through the JavaScript function.
Although it can be directly implemented through a code sentence:
Document. getElementById ("content"). innerHTML = ""
However, this article mainly discusses the removeChild function.
I would like to think that the following code can be used:
The Code is as follows:
Function deleteData (){
Var el = document. getElementById ('thelist ');
Var liNodes = document. getElementsByTagName ("li ");
Alert (liNodes. length );
For (var I = 0; I <liNodes. length; I ++ ){
Alert ("delete" + I + "liNodes [I] =" + liNodes [I]);
El. removeChild (liNodes [I]);
// <-- El. removeChild (liNodes [I]);
}
}
Unexpectedly, after clicking the button, only 1, 3, 5... were cleared, while 2, 4, 6... did not disappear,
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.
There is no syntax error, but the expected result is not obtained. This is an algorithm error! How can I fix it?
If "sequential deletion" is not available, delete it in reverse order. Modify the for statement as follows:
The Code is as follows:
Function deleteData (){
Var el = document. getElementById ('thelist ');
Var liNodes = document. getElementsByTagName ("li ");
Alert (liNodes. length );
For (var I = liNodes. length-1; I> = 0; I --){
Alert ("delete" + I + "liNodes [I] =" + liNodes [I]);
El. removeChild (liNodes [I]);
// <-- El. removeChild (liNodes [I]);
}
}
Try it. It's successful! You can also use the following method:
The Code is as follows:
Function deleteData (){
Var el = document. getElementById ('thelist ');
Var liNodes = document. getElementsByTagName ("li ");
Alert (liNodes. length );
For (var I = 0; I <el. childNodes. length; I ++ ){
Var childNode = el. childNodes [0]; // always Delete the first entry, is it simpler?
El. removeChild (childNode );
}
}
The complete code is as follows:
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK">
<Title> iScroll demo: simple </title>
<Script type = "text/javascript">
Function initData (){
Var el = document. getElementById ('thelist ');
Var liNodes = document. getElementsByTagName ("li ");
Alert (liNodes. length );
For (var I = liNodes. length-1; I> = 0; I --){
Alert ("delete" + I + "liNodes [I] =" + liNodes [I]);
El. removeChild (liNodes [I]);
// <-- El. removeChild (liNodes [I]);
}
}
</Script>
<Style type = "text/css" media = "all">
Body, ul, li {
Padding: 0;
Margin: 0;
Border: 0;
}
Body {
Font-size: 12px;
-Webkit-user-select: none;
-Webkit-text-size-adjust: none;
Font-family: helvetica;
}
</Style>
</Head>
<Body>
<Div> <input type = "submit" name = "button" id = "button" value = "delete li node" class = "button gray" onclick = "initData () "/> </div>
<Div>
<Ul id = "thelist">
<Li> Pretty row 1 </li>
<Li> Pretty row 2 </li>
<Li> Pretty row 3 </li>
<Li> Pretty row 4 </li>
<Li> Pretty row 5 </li>
<Li> Pretty row 6 </li>
<Li> Pretty row 7 </li>
<Li> Pretty row 8 </li>
<Li> Pretty row 9 </li>
<Li> Pretty row 10 </li>
<Li> Pretty row 40 </li>
</Ul>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
