1
votes

Comment supprimer une liste ordonnée en utilisant Javascript?

J'ai donné 2 codes ci-dessous -
Code 1: Voici mon code qui utilise querySelector pour sélectionner le nom de la classe que je souhaite supprimer.
Mais cela ne supprime que le premier élément de liste et ne fonctionne pas pour la liste restante qui a également le même nom de classe que le premier élément de liste.
Pourquoi cela ne fonctionne-t-il pas après la suppression du premier élément de la liste (après la suppression de la première liste, le nom de classe «remove» est également toujours là et ne fonctionne pas pour eux)?

Maintenant, allez au code 2 pour est ma solution à la question.

<!-- HTML  same as in code 1-->
<div><p>click on minus icon to remove list item</p>
    <ol>
        <li>list1 <span class="remove"> - </span></li>
        <li>list2 <span class="remove"> - </span></li>
        <li>list3 <span class="remove"> - </span></li>
        <li>list4 <span class="remove"> - </span></li>
        <li>list5 <span class="remove"> - </span></li>
    </ol>
</div>

/* CSS same as in code 1*/
ol li {
    background-color: rgb(104, 144, 113);
    margin: 10px 0px;
    padding: 10px;
    max-width: 250px
}
       li span.remove {
           float: right;
    font-size: 20px;
    font-weight: 1000;
    color: red;
    cursor: pointer;
    background-color: silver;
    display: inline-block;
    width: 23px;
    border-radius: 50px;
    text-align: center;
}

//JAVASCRIPT ----CODE 2-----
let ol = document.querySelector('ol');

ol.addEventListener('click',function(e){
    if(e.target.className == "remove"){ // only select element which has class name 'remove'
    let length = document.querySelectorAll('li').length;
    if(length > 1){ //ignore to remove all list
    let remove = e.target.parentNode;
    remove.parentNode.removeChild(remove);
    }
    }
});

Code 2:

solution du code 1.
J'utilise ici querySelector pour ol qui est la liste ordonnée et à l'intérieur du querySelector J'utilise if (e.target.className == "remove") code > pour supprimer l'élément de liste.

<!-- HTML -->
<div><p>click on minus icon to remove list item</p>
    <ol>
        <li>list1 <span class="remove"> - </span></li>
        <li>list2 <span class="remove"> - </span></li>
        <li>list3 <span class="remove"> - </span></li>
        <li>list4 <span class="remove"> - </span></li>
        <li>list5 <span class="remove"> - </span></li>
    </ol>
</div>

/* CSS*/
ol li {
    background-color: rgb(104, 144, 113);
    margin: 10px 0px;
    padding: 10px;
    max-width: 250px
}
       li span.remove {
           float: right;
    font-size: 20px;
    font-weight: 1000;
    color: red;
    cursor: pointer;
    background-color: silver;
    display: inline-block;
    width: 23px;
    border-radius: 50px;
    text-align: center;
}

//JAVASCRIPT ----CODE 1-----
let ol = document.querySelector('.remove');

ol.addEventListener('click',function(e){
    let length = document.querySelectorAll('li').length;
    if(length > 1){//ignore to remove all list
    let remove = e.target.parentNode;
    remove.parentNode.removeChild(remove);
    }
});

Aidez-moi:

mais je ne veux pas utiliser: document.querySelector ('ol') qui sélectionne toute la liste ordonnée, ce qui entraînera une perte de mémoire .
Je veux obtenir ma réponse en sélectionnant uniquement le nom de la classe «supprimer» au lieu de la liste ordonnée entière.

Nous pouvons utiliser let ol = document.querySelectorAll ('span.remove') qui sélectionnez tous les éléments du nom de classe 'remove' qui stockent sous forme de tableau variable ol mais après, comment pouvons-nous sélectionner cet élément de tableau qui sera supprimé ?

javascript dom-events

3 commentaires

Avez-vous déjà déterminé si le gaspillage de mémoire aura un impact négatif sur votre application? Si vous ne l'avez pas fait, votre question est en fait sans objet.

@RobertHarvey Je n'ai pas encore déterminé, mais pourquoi stockons-nous des données inutiles en mémoire? Une liste ordonnée peut contenir des «millions» de liste récursive, donc stocker des millions de listes dans une variable n'est pas bon pour la complexité temporelle dans laquelle seul un élément est nécessaire. C'est pourquoi j'ai posé une question.

@Abhishekkamal attacher le gestionnaire d'événements au

, vous pourriez vous retrouver avec de nombreuses copies en mémoire car il y a des éléments
, cela signifie le

3 Réponses :

0
votes

votre code ne fonctionne pas car dans votre code ol est une collection de tous les éléments avec le nom de classe "remove". Donc, vous ne pouvez pas l'utiliser comme un seul élément, vous devriez utiliser une boucle for sur ol pour accéder à chaque élément avec le nom de classe "remove".

Quelque chose comme ça:

for (var i = 0; i < ol.length; i++) {
  ol[i].addEventListener('click', myFunction, false);
}

0 commentaires

0
votes

La réponse à la question de savoir pourquoi la première version du code ne fonctionne pas correctement est que vous définissez let ol = document.querySelector ('. remove'); qui prend uniquement le premier élément avec cette classe et met en mémoire sur la page de chargement. Ainsi, lorsque vous y mettez un écouteur d'événements, vous ne l'affectez qu'à cet élément, qui manque après en avoir supprimé un. C'est pourquoi cela ne fonctionne que sur le premier élément. Vous devrez utiliser document.querySelectorAll pour obtenir tous les éléments avec cette classe, pas seulement en premier.

<!-- HTML -->
<div><p>click on minus icon to remove list item</p>
    <ol>
        <li>list1 <span class="remove"> - </span></li>
        <li>list2 <span class="remove"> - </span></li>
        <li>list3 <span class="remove"> - </span></li>
        <li>list4 <span class="remove"> - </span></li>
        <li>list5 <span class="remove"> - </span></li>
    </ol>
</div>

/* CSS*/
ol li {
    background-color: rgb(104, 144, 113);
    margin: 10px 0px;
    padding: 10px;
    max-width: 250px
}
       li span.remove {
           float: right;
    font-size: 20px;
    font-weight: 1000;
    color: red;
    cursor: pointer;
    background-color: silver;
    display: inline-block;
    width: 23px;
    border-radius: 50px;
    text-align: center;
}

//JAVASCRIPT ----CODE 1-----
let ol = document.querySelectorAll('.remove');

ol.forEach(function(element){
    element.addEventListener('click',function(e){
    let length = document.querySelectorAll('li').length;
    if(length > 1){//ignore to remove all list
    let remove = e.target.parentNode;
    remove.parentNode.removeChild(remove);
    }
})
});

4 commentaires

Votre code ne fonctionne pas correctement .. le 5ème élément semble toujours être là lorsque vous cliquez pour le supprimer ??

Oui, c'est vrai, mais si je me souviens bien, c'était l'intention de l'auteur de cette question. Il s'est fait la condition de retirer jusqu'à 1 article à gauche. Il n'a jamais mentionné la suppression de tous les éléments. Je viens de demander pourquoi son code ne fonctionne pas après le 1er élément

oui, j'ai vu cela dans le code, mais aussi le commentaire dit ignorer pour supprimer toute la liste

Je pense que ce n'est ni à moi ni à vous de décider ce qu'il voulait exactement réaliser puisqu'il n'y avait aucun détail à ce sujet. J'apprécie vos efforts pour que cela soit clair.

0
votes

Vous pouvez le faire pour supprimer tout ce code supplémentaire

<!DOCTYPE html>
<html>
<div>
  <p>click on minus icon to remove list item</p>
  <ol>
  
    <li>list1 <span class="remove"> - </span></li>
    <li>list2 <span class="remove"> - </span></li>
    <li>list3 <span class="remove"> - </span></li>
    <li>list4 <span class="remove"> - </span></li>
    <li>list5 <span class="remove"> - </span></li>
  </ol>
  </div>
</html>

/* CSS*/
ol li {
    background-color: rgb(104, 144, 113);
    margin: 10px 0px;
    padding: 10px;
    max-width: 250px
}
       li span.remove {
           float: right;
    font-size: 20px;
    font-weight: 1000;
    color: red;
    cursor: pointer;
    background-color: silver;
    display: inline-block;
    width: 23px;
    border-radius: 50px;
    text-align: center;
}

document.querySelectorAll('.remove').forEach((item) => {
	item.onclick = (event) => {
		let length = item.parentElement.parentElement.children.length;
		if (length > 1) {
			item.parentElement.outerHTML = ""
		}
		
	};
});

Explication :

Remarque: chaque fois que vous voyez quelque chose comme (item) => {etc.} , vous pouvez penser que cela dit function (item) {etc.}

les deux sont exactement la même chose.

Maintenant ..

querySelectorAll sélectionne tous les éléments.

Pour les parcourir en boucle vous faites .forEach()

À l'intérieur de forEach doit être une fonction avec au moins item comme paramètre qui représente l'élément en cours de bouclage

donc document.querySelectorAll ("ol") renvoie une liste de toutes les balises OL

puis en ajoutant document.querySelectorAll ("ol"). forEach ((item) => { / * item est maintenant chaque élément OL * /})

alors vous pouvez faire document.querySelectorAll (". remove"). forEach ((item) => {}) qui obtiendra tous les éléments correspondant à la classe 'remove'

enfin, vous utilisez simplement la liaison .onclick pour ajouter un événement qui opère uniquement sur cet élément spécifique en faisant item.onclick = (événement) => {item.parentElement.parentElement.removeChild (item.parentElement) ; } ou il peut s'agir de item.parentElement.outerHTML = "" qui ont tous deux la même fonctionnalité.

0 commentaires