J'ai essayé de comprendre comment je peux supprimer une balise "li" spécifique en tapant son numéro en fonction de sa position dans une liste (c'est-à-dire tapez 3 dans la zone de texte, puis appuyez sur un bouton pour supprimer l'élément en position 3 de la liste ). La façon dont mon code est maintenant, même s'il n'y a que 4 éléments répertoriés, taper 5 et appuyer sur Entrée supprime toujours 2 éléments plutôt que de n'en supprimer aucun. La façon dont mon code est écrit, il n'est pas cohérent avec le nombre tapé pour supprimer la balise "li" spécifique.

Toute aide serait appréciée, merci.

<html>
<head>
<title>Chapter 5 Activity</title>
</head>

<body>
<h1>The Best Fruit in the World</h1>
<ol id="fruit">
  <li>Mangos</li>
  <li>Watermelons</li>
  <li>Kiwis</li>
  <li>Pineapples</li>
</ol>

<form action="">

<input type="text" name="rfruit" id="fruitremove">
  <input type="button" value="Click to Remove" onclick="removefruit()">
  Remove fruit you dislike
</form>


<script type="text/javascript">


function removefruit(){
  var fruitminus = document.getElementById("fruitremove").value;
  var flist = document.getElementById("fruit");


  flist.removeChild(flist.childNodes[fruitminus]);

}

</script>

</body>
</html>
2
LWYLHDTM89 11 nov. 2020 à 05:55

1 réponse

Meilleure réponse

Le problème vient du fait que la NodeList créée pour votre flist a une longueur de 8 dans votre cas. En effet, 2 éléments sont créés par élément de liste (l'un est un texte et l'autre est li). Donc, ajoutez simplement une condition if avant de supprimer le nœud enfant comme ceci :

if(fruitminus < (flist.childNodes.length)/2)
    flist.removeChild(flist.childNodes[2*fruitminus - 1]);

L'index de li est présent à des positions impaires dans la NodeList, c'est pourquoi nous devons supprimer le childNode à cette position.

1
highDef4k 11 nov. 2020 à 07:11