Commentaire: Tous les nœuds peuvent être supprimés via JavaScript. Cet article traite principalement de la fonction Removechild. Vous pouvez jeter un œil aux exemples suivants
Supposons qu'il y ait quelque chose dans la div:<! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = gbk">
<Title> Demo Iscroll: Simple </Title>
<script type = "text / javascript">
fonction deletedata () {
}
</cript>
<style type = "text / css" media = "all">
corps, ul, li {
rembourrage: 0;
marge: 0;
bordure: 0;
}
corps {
taille de police: 12px;
-Webkit-user-Select: Aucun;
-webkit-text-size-ajustement: aucun;
Font-Family: Helvetica;
}
</ style>
</ head>
<body>
<div> <input type = "soumi" value = "delete li nœud" /> </div>
<div>
<ul>
<li> jolie rangée 1 </li>
<li> jolie rangée 2 </li>
<li> jolie rangée 3 </li>
<li> jolie rangée 4 </li>
<li> jolie rangée 5 </li>
<li> jolie rangée 6 </li>
<li> jolie rangée 7 </li>
<li> jolie rangée 8 </li>
<li> jolie rangée 9 </li>
<li> jolie rangée 10 </li>
<li> jolie rangée 40 </li>
</ul>
</div>
</docy>
</html>
Vous devez maintenant les effacer grâce aux fonctionnalités de JavaScript.
Bien qu'il puisse être directement implémenté par une phrase de code:
document.getElementById (Content) .InnerHtml =
Cependant, cet article traite principalement de la fonction Removechild.
Je l'ai tenu pour acquis que cela pourrait être fait avec l'aide du code suivant:
fonction deletedata () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsByTagName ("li");
alerte (linodes.length);
pour (var i = 0; i <linodes.length; i ++) {
alert ("delete" + i + "linodes [i] =" + linodes [i]);
el.removechild (linodes [i]);
// <- el.removechild (linodes [i]);
}
}
De façon inattendue, après avoir cliqué sur le bouton, seulement 1, 3, 5 ... a été effacé, tandis que 2, 4, 6 ... n'a pas disparu.
Le problème est survenu dès le début:
Après la suppression du premier nœud, l'ordre des nœuds suivants a changé: le deuxième nœud d'origine va de l'avant et devient le nouveau premier nœud; Le troisième nœud d'origine devient le deuxième nœud ...
Ainsi, l'étape suivante consistait à supprimer le deuxième nœud, mais le troisième nœud le plus original a été supprimé.
En fin de compte, tous n'ont pas été supprimés, seulement 1, 3, 5 ont été supprimés, laissant 2, 4 et 6.
Il n'y a pas d'erreurs dans la syntaxe, mais le résultat souhaité n'est pas obtenu. Ceci est l'erreur dans l'algorithme! Comment le corriger?
Si vous le supprimez en séquence, supprimez-le dans l'ordre inverse. Modifiez l'instruction FOR:
fonction deletedata () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsByTagName ("li");
alerte (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]);
}
}
Essayez-le, il a réussi! Vous pouvez également utiliser la méthode suivante:
fonction deletedata () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsByTagName ("li");
alerte (linodes.length);
pour (var i = 0; i <el.childnodes.length; i ++) {
var childNode = el.childNodes [0]; // supprime toujours le premier, n'est-ce pas plus facile
El.Removechild (ChildNode);
}
}
Le code d'achèvement ressemble à ceci:
<! Doctype html>
<html>
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = gbk">
<Title> Demo Iscroll: Simple </Title>
<script type = "text / javascript">
fonction initdata () {
var el = document.getElementById ('thelist');
var linodes = document.getElementsByTagName ("li");
alerte (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]);
}
}
</cript>
<style type = "text / css" media = "all">
corps, ul, li {
rembourrage: 0;
marge: 0;
bordure: 0;
}
corps {
taille de police: 12px;
-Webkit-user-Select: Aucun;
-webkit-text-size-ajustement: aucun;
Font-Family: Helvetica;
}
</ style>
</ head>
<body>
<div> <input type = "soumi" value = "delete li nœud" /> </div>
<div>
<ul>
<li> jolie rangée 1 </li>
<li> jolie rangée 2 </li>
<li> jolie rangée 3 </li>
<li> jolie rangée 4 </li>
<li> jolie rangée 5 </li>
<li> jolie rangée 6 </li>
<li> jolie rangée 7 </li>
<li> jolie rangée 8 </li>
<li> jolie rangée 9 </li>
<li> jolie rangée 10 </li>
<li> jolie rangée 40 </li>
</ul>
</div>
</docy>
</html>