Comentario: Todos los nodos se pueden eliminar a través de JavaScript. Este artículo analiza principalmente la función RemoVeChild. Puedes echar un vistazo a los siguientes ejemplos
Supongamos que hay algo en el Div:<! Doctype html>
<html>
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> Iscroll Demo: Simple </title>
<script type = "text/javaScript">
función deletedata () {
}
</script>
<style type = "text/css" media = "all">
cuerpo, ul, li {
relleno: 0;
margen: 0;
borde: 0;
}
cuerpo {
tamaño de fuente: 12px;
-Webkit-user-select: ninguno;
-webkit-text-size-adjust: Ninguno;
Font-Family: Helvetica;
}
</style>
</ablo>
<Body>
<Div> <input type = "subt" value = "delete li nodo" /> </div>
<div>
<ul>
<li> Bonita fila 1 </li>
<li> Bonita fila 2 </li>
<li> Bonita fila 3 </li>
<li> Bonita fila 4 </li>
<li> Bonita fila 5 </li>
<li> Bonita fila 6 </li>
<li> Bonita fila 7 </li>
<li> Bonita fila 8 </li>
<li> Bonita fila 9 </li>
<li> Bonita fila 10 </li>
<li> Bonita fila 40 </li>
</ul>
</div>
</body>
</html>
Ahora debe borrarlos a través de las características de JavaScript.
Aunque se puede implementar directamente a través de una oración de código:
document.getElementById (contenido) .innerhtml =
Sin embargo, este artículo analiza principalmente la función RemoVeChild.
Da por sentado que podría hacerse con la ayuda del siguiente código:
función deletedata () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsBytagName ("li");
alerta (linodes.length);
para (var i = 0; i <linodes.length; i ++) {
alerta ("eliminar"+i+"linodes [i] ="+linodes [i]);
El.removechild (Linodes [i]);
// <- El.removechild (Linodes [i]);
}
}
Inesperadamente, después de hacer clic en el botón, solo 1, 3, 5 ... fue despejado, mientras que 2, 4, 6 ... no desapareció.
El problema surgió desde el principio:
Después de eliminar el primer nodo, el orden de los nodos posteriores ha cambiado: el segundo nodo original está avanzando y se convierte en el nuevo primer nodo; El tercer nodo original se convierte en el segundo nodo ...
Entonces, el siguiente paso fue eliminar el segundo nodo, pero se eliminó el tercer nodo más original.
Al final, no todos fueron eliminados, solo 1, 3, 5 fueron eliminados, dejando 2, 4 y 6.
No hay errores en la sintaxis, pero no se obtiene el resultado deseado. ¡Este es el error en el algoritmo! ¿Cómo corregirlo?
Si lo elimina en secuencia, elimínelo en orden inverso. Modificar la declaración para:
función deletedata () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsBytagName ("li");
alerta (linodes.length);
for (var i = linodes.length-1; i> = 0; i-) {
alerta ("eliminar"+i+"linodes [i] ="+linodes [i]);
El.removechild (Linodes [i]);
// <- El.removechild (Linodes [i]);
}
}
Pruébalo, ¡tuvo éxito! También puede usar el siguiente método:
función deletedata () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsBytagName ("li");
alerta (linodes.length);
para (var i = 0; i <el.childnodes.length; i ++) {
var childNode = el.childnodes [0]; // siempre elimina el primero, ¿no es más fácil?
El.removechild (Nodo);
}
}
El código de finalización se ve así:
<! Doctype html>
<html>
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = gbk">
<title> Iscroll Demo: Simple </title>
<script type = "text/javaScript">
función initData () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsBytagName ("li");
alerta (linodes.length);
for (var i = linodes.length-1; i> = 0; i-) {
alerta ("eliminar"+i+"linodes [i] ="+linodes [i]);
El.removechild (Linodes [i]);
// <- El.removechild (Linodes [i]);
}
}
</script>
<style type = "text/css" media = "all">
cuerpo, ul, li {
relleno: 0;
margen: 0;
borde: 0;
}
cuerpo {
tamaño de fuente: 12px;
-Webkit-user-select: ninguno;
-webkit-text-size-adjust: Ninguno;
Font-Family: Helvetica;
}
</style>
</ablo>
<Body>
<Div> <input type = "subt" value = "delete li nodo" /> </div>
<div>
<ul>
<li> Bonita fila 1 </li>
<li> Bonita fila 2 </li>
<li> Bonita fila 3 </li>
<li> Bonita fila 4 </li>
<li> Bonita fila 5 </li>
<li> Bonita fila 6 </li>
<li> Bonita fila 7 </li>
<li> Bonita fila 8 </li>
<li> Bonita fila 9 </li>
<li> Bonita fila 10 </li>
<li> Bonita fila 40 </li>
</ul>
</div>
</body>
</html>