Discussion :

[Jonathan Design]

Bonjour,

je suis en train d'essayer d'apprendre le JS/jquery en codant une petite Todo List et j'ai un soucis à sélectionner un élément spécifique.
J'ai créer un petit btn qui me permet d'ajouter une ligne à ma todo List qui contient un input (check), un autre input (text) et un petit icone poubelle et j'aimerai que quand je clique sur cette dernière, ma ligne se supprime.
Pour faire plus simple le top serait que quand je clique sur une des poubelles , la div qui contient celle ci se supprime. J'essaie depuis hier de trouver sur les doc de Jquery et le forum mais je n'y arrive toujours pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(document).ready(function(){
//   Suppression de la raw
  $(".todolist__list__raw__trash").click(function(){
    $("#todolist__list__raw").remove();  // j'aimerai supprimer la "raw" ou ma ".todolist__list__raw__trash" est.
  });
});

lien de mon petit exercice que j'essaie de faire :
https://codepen.io/Jonathan_Design/pen/OJwqXrO

Merci
Jonathan

[mathieu]

si vous êtes débutant en javascript, je vous conseille de laisser tomber jquery. cette bibliothèque était utile il y a quelques années quand il y a avait des grandes différences entre navigateurs et moins de fonctionnalités dans javascript de base. mais maintenant les navigateurs ont évolué et le code javascript de base permet de faire plus de choses.
si jamais vous avez beaucoup d'exemples en jquery en stock, vous pouvez trouver leurs équivalents en javascript de base à l'aide de ces pages :
https://github.com/camsong/You-Dont-...r/README-fr.md
https://youmightnotneedjquery.com/

en ce qui concerne votre question, je vois que vous avez avancé puisque sur le lien codepen, la suppression des lignes fonctionne et vous avez posé une autre question dans le commentaire du code

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
//  SUPPRESSION DE LA RAW ACTIVE
    $(document).on('click', '.todolist__list__raw__trash', function() {
      $(this).parent().remove();
    });
 
//  NE FONCTIONNE PAS CORRECTEMENT, POURQUOI ???
  // $(".todolist__list__raw__trash").click(function(){
  //   $(this).parent().remove();
  // });

la différence entre ces 2 codes est la même en jquery et en javascript de base : dans la 2e partie du code est que vous commencez par sélectionner tous les éléments de la classe indiquée et vous écoutez l'évènement "click" sur ces éléments.
le souci est que vous sélectionnez seulement les éléments qui existent déjà lors de l'exécution du code. et donc les éléments créés plus tard avec cette classe ne sont pas gérés.
en revanche en écoutant le "click" au niveau de "document", vous allez écouter tous les clics et même ceux sur les éléments créés plus tard.

[Jonathan Design]

Bonjour Mathieu est merci encore pour la réponse !

J'avais prévu de base de faire le même exercice mais en version Javascript, justement pour rester dans l'apprentissage, mais j'ai bloqué sur beaucoup de problème j'ai donc switch sur du Jquery car je trouve la syntaxe plus simple (j'ai cherché la facilité je l'avoue ^^)

merci encore d'avoir pris le temps de me répondre