Comentário: Todos os nós podem ser excluídos através do JavaScript. Este artigo discute principalmente a função removechild. Você pode dar uma olhada nos seguintes exemplos
Suponha que haja algo na div:<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> ISCROLL Demo: Simple </ititle>
<script type = "text/javascript">
função deletedata () {
}
</script>
<style type = "text/css" media = "all">
corpo, ul, li {
preenchimento: 0;
margem: 0;
borda: 0;
}
corpo {
tamanho de fonte: 12px;
-Webkit-user-select: Nenhum;
-webkit-text-size-adjust: nenhum;
Fonte-família: Helvetica;
}
</style>
</head>
<Body>
<div> <input type = "submit" value = "exclate li node" /> </div>
<div>
<ul>
<li> LOTA LINHA 1 </li>
<li> Pretty Row 2 </li>
<li> Pretty Row 3 </li>
<li> Pretty Row 4 </li>
<li> Pretty Linha 5 </li>
<li> Pretada linha 6 </li>
<li> LOTA LINHA 7 </li>
<li> Linha bonita 8 </li>
<li> LOTA LINHA 9 </li>
<li> Pretty Row 10 </li>
<li> LOTA LINHA 40 </li>
</ul>
</div>
</body>
</html>
Agora você precisa limpá -los através dos recursos do JavaScript.
Embora possa ser implementado diretamente através de uma frase de código:
document.getElementById (content) .innerhtml =
No entanto, este artigo discute principalmente a função removechild.
Eu tomei como certo que isso poderia ser feito com a ajuda do seguinte código:
função deletedata () {
var el = document.getElementById ('tela da lista');
var linodes = document.getElementsByTagName ("li");
alerta (linodes.length);
for (var i = 0; i <linodes.length; i ++) {
alerta ("excluir"+i+"linodes [i] ="+linodes [i]);
el.removechild (linodes [i]);
// <- el.removechild (linodes [i]);
}
}
Inesperadamente, depois de clicar no botão, apenas 1, 3, 5 ... foi limpo, enquanto 2, 4, 6 ... não desapareceram.
O problema surgiu desde o início:
Depois de excluir o primeiro nó, a ordem dos nós subsequentes mudou: o segundo nó original está avançando e se torna o novo primeiro nó; O terceiro nó original se torna o segundo nó ...
Então, o próximo passo foi excluir o segundo nó, mas o terceiro nó mais original foi excluído.
No final, nem todos foram excluídos, apenas 1, 3, 5 foram excluídos, deixando 2, 4 e 6.
Não há erros na sintaxe, mas o resultado desejado não é obtido. Este é o erro no algoritmo! Como corrigi -lo?
Se você o excluir em sequência, exclua -o em ordem inversa. Modifique a declaração for:
função deletedata () {
var el = document.getElementById ('tela da lista');
var linodes = document.getElementsByTagName ("li");
alerta (linodes.length);
for (var i = linodes.length-1; i> = 0; i-) {
alerta ("excluir"+i+"linodes [i] ="+linodes [i]);
el.removechild (linodes [i]);
// <- el.removechild (linodes [i]);
}
}
Experimente, conseguiu! Você também pode usar o seguinte método:
função deletedata () {
var el = document.getElementById ('tela da lista');
var linodes = document.getElementsByTagName ("li");
alerta (linodes.length);
for (var i = 0; i <el.childnodes.length; i ++) {
var ChildNode = El.Childnodes [0]; // sempre exclua o primeiro, não é mais fácil
El.removeChild (ChildNode);
}
}
O código de conclusão é assim:
<! Doctype html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> ISCROLL Demo: Simple </ititle>
<script type = "text/javascript">
função initdata () {
var el = document.getElementById ('tela da lista');
var linodes = document.getElementsByTagName ("li");
alerta (linodes.length);
for (var i = linodes.length-1; i> = 0; i-) {
alerta ("excluir"+i+"linodes [i] ="+linodes [i]);
el.removechild (linodes [i]);
// <- el.removechild (linodes [i]);
}
}
</script>
<style type = "text/css" media = "all">
corpo, ul, li {
preenchimento: 0;
margem: 0;
borda: 0;
}
corpo {
tamanho de fonte: 12px;
-Webkit-user-select: Nenhum;
-webkit-text-size-adjust: nenhum;
Fonte-família: Helvetica;
}
</style>
</head>
<Body>
<div> <input type = "submit" value = "exclate li node" /> </div>
<div>
<ul>
<li> LOTA LINHA 1 </li>
<li> Pretty Row 2 </li>
<li> Pretty Row 3 </li>
<li> Pretty Row 4 </li>
<li> Pretty Linha 5 </li>
<li> Pretada linha 6 </li>
<li> LOTA LINHA 7 </li>
<li> Linha bonita 8 </li>
<li> LOTA LINHA 9 </li>
<li> Pretty Row 10 </li>
<li> LOTA LINHA 40 </li>
</ul>
</div>
</body>
</html>