OK nous reviendrons la prochaine fonctionnalité que je veux aborder est le bouton X ici.
Donc, lorsque nous cliquons sur ce X, il devrait en fait supprimer l'ensemble Pour le faire, pas seulement en grisé, mais il devrait effectivement disparaître et supprimer.
Donc, il ressemble à ceci sur la version finale.
Nous n'avons pas la même icône pour cliquer sur dans les mêmes couleurs ou l'animation, mais la fonctionnalité lorsque je clique sur quelque chose devrait être la même.
Alors disons que je suis fait avec des plats.
Il s'efface et disparaît.
Et il n'est plus ici il est complètement disparu.
D'ACCORD.
La première chose que nous voulons faire est d'écouter un clic sur l'un de ces ex.
Et à notre époque Tim, je me souviendrai que nous avons fait chacun un enchaînement afin que nous puissions facilement faire cela.
Sinon, si nous avions juste un X dans le mensonge, il n'y a aucun moyen de déterminer si notre clic est sur le X ou si c'est sur le reste du chemin.
Donc nous venons d'être là et maintenant nous irons à un javascript et ajoutons dans un autre commentaire.
Cliquez sur X pour supprimer pour le faire, nous allons commencer par l'événement click.
Donc signe dollar.
Sélectionnez tout spand Et vous allez cliquer de nouveau et puis nous avons besoin d'une fonction de rappel et au lieu de notre rappel nous ferons simplement un autre clic sur une période juste comme ça et nous allons revenir rafraîchir, nous cliquons sur le mensonge rien ne se passe.
Dès que nous cliquons sur la travée, nous obtenons une alerte indiquant que vous avez cliqué sur cette plage.
Il ya un petit problème que vous n'avez peut-être pas remarqué quand je clique sur la portée et puis cliquez sur le X Je reçois l'alerte que je m'attends à obtenir, mais aussi payer une attention particulière que j'ai rejeté l'alerte.
Nous obtenons également les styles qui proviennent de l'événement click.
Donc, ce qui nous dit, c'est que l'événement de spam est de tir, puis après l'événement clic de ly est tir ainsi.
Et cela fait sens parce que nos travées sont à l'intérieur des alliés.
Donc quand nous cliquons sur une portée quand je clique sur cette étendue par exemple au milieu, nous allons l'inspecter, je clique sur cette portée, mais c'est l'espagnol aussi à l'intérieur de l'allié.
Donc, d'un autre point de vue, je clique sur le mensonge.
Mais d'un autre point de vue, je clique sur le puits parce que tous ceux-ci sont au lieu d'un UL ou sur le conteneur div ID ou sur le corps ou sur l'élément de l'équipe qu'un seul clic sur cette période est de passer à travers vous savez cinq ou six différents couches.
Donc, quand nous ajoutons dans l'écouteur d'événement à la portée ou à l'allié ou si nous avions un écouteur d'événement et tous ceux que je vais vous montrer dès maintenant.
Alors ajoutons un autre écouteur d'événement ici et celui-ci sera sur le testament et nous allons juste alerte cliqué sur UIL et fera un de plus.
Et celui-ci sera sur le conteneur divx ID et cela va dire cliquez sur le conteneur div et effectivement le fera sur le corps ainsi.
Et cela va dire cliquez sur le corps.
D'ACCORD.
Alors nous cliquons sur la portée qui est au lieu d'un allié au lieu d'un UL au lieu du conteneur à l'intérieur du corps.
Maintenant, faisons attention lorsque nous rafraîchissons l'ordre dans lequel les choses se déclenchent.
Donc d'abord, je clique sur la portée et il me dit cliqué sur la portée et puis je ne sais pas si vous avez remarqué, mais le feu d'événement clic bien, c'est comme ça que nous avons obtenu les styles là-bas.
Et puis le bien cliquez événement puis le conteneur div et puis le corps enfin.
Cet exemple illustre donc un phénomène appelé bubbling événement.
Ce qui se passe est cet événement initialement est déclenché sur la portée et c'est où il provient.
Mais alors il bulles en place dans deux éléments parents.
Donc, il bulles dans le mensonge et il déclenchera tout comme les événements de clic et puis de là, il bulles jusqu'à la boîte pour le puits qui déclenchera tout événement bien cliquer et ainsi de suite jusqu'à ce qu'il touche l'élément HTL où il s'arrête pour empêcher la mensonge.
Cliquez sur le gestionnaire de déclenchement lorsque nous cliquons sur la portée qui se trouve à l'intérieur de la Y.
Ce que nous pouvons faire est de dire réellement l'événement à l'intérieur de la portée de ne pas bulle plus.
Juste pour arrêter dans ses voies et ne pas déclencher d'autres événements sur l'élément parent.
Donc je vais vous montrer ça ici.
Tout ce que nous avons besoin de faire au lieu de cette audience rapide span que nous ajoutons dans l'objet événement.
Et encore cela peut être appelé E événement T.
Le nom que vous souhaitez le plus commun est event ou e.
Et puis ce que nous allons faire est d'ajouter dans une méthode appelée la propagation d'arrêt d'événement.
Et c'est une méthode de codage J qui empêchera l'événement de bouillonner.
Donc, il va tirer sur la portée, mais il ne continuera pas sur l'auditeur comme ou l'un de ceux que nous avons pour cette question.
Donc, si nous sauvegardons et rafraîchissons.
Et maintenant je clique sur un span Je reçois toujours mon cliqué sur la portée et puis il s'arrête.
Nous n'obtenons aucun de ces autres auditeurs que nous avions mis en place en tirant un autre que nous avons l'auditeur span configuré correctement.
Remplissons-le avec le code correct.
Ce que nous devions faire, c'est quand nous cliquons sur un span, je reviendrai au navigateur quand nous cliquons sur l'un de ceux-ci.
Nous voulons supprimer ce mensonge afin que le mensonge qui le contient puisse se rafraîchir.
Je clique sur cette période, il a besoin de supprimer ce mensonge et pour ce faire, nous pouvons commencer à partir de la portée en utilisant le signe dollar et si nous faisons juste des dollars sur ce supprimer ou fade out, mais nous allons commencer avec supprimer.
Et nous y retournons.
Tout ce qui arrive, c'est que la portée disparaît.
Nous supprimons maintenant la portée.
Nous avons besoin de supprimer l'élément inclus et Shakeri nous donne un moyen vraiment agréable et facile de le faire.
Tout ce que nous avons à faire est d'écrire ces parents supprimer et qui nous donnera réellement l'élément parent comme un élément de requête.
Donc, c'est une période que nous avons cliqué sur parent nous donne le mensonge supprimer supprimer l'allié tout.
Alors maintenant, si je rafraîchis, vous pouvez le voir disparaître et rafraîchir à nouveau.
Mais si je clique sur la mouche, il vérifie la dernière amélioration que nous pourrions faire est plutôt que de le supprimer immédiatement.
Il s'est évanoui.
Donc, nous allons faire un point fade out et commencer là revenir rafraîchir, nous cliquons et il disparaît.
Mais n'oubliez pas que le montage ne l'enlève pas.
Il est encore ici si nous inspectons au lieu de notre bien que nous avons encore trois à faire est juste deux d'entre eux ont afficher aucun.
Et nous ne voulons pas que cela arrive.
Imaginez que nous avions un millier à perdre que nous avions supprimé.
Eh bien, nous ne voulons pas ralentir les choses en ayant un millier d'éléments cachés sur notre page.
Donc ce que nous allons faire à la place est d'utiliser supprimer, mais rappelez-vous qu'il ne fonctionne pas juste pour ce faire.
Il va l'enlever, mais il n'attendra pas le fondu pour terminer.
Si nous voulons démontrer si rapidement que nous cliquons sur elle commence à s'estomper et puis immédiatement après il enlève si nous voulons que le fondu de finition de tout ce que nous avons besoin de faire est d'utiliser le rappel, nous pouvons passer à fadeout qui sera exécuté après.
Et donnons-lui une durée ainsi disons cinq cents millisecondes pour commencer.
Et puis quand il est fait, nous ne pouvons pas simplement appeler retirer sur ses propres.
Nous devons l'appeler sur un élément et l'élément sur lequel nous voulons l'appeler est le même que nous remplissons afin que nous puissions utiliser un signe dollar.
Ceci est important de noter que ce droit ici n'est pas le même signe de dollar ce droit ici.
Alors passons à travers que c'est un peu compliqué quand nous cliquons sur un signe dollar espagnol.
Cela se réfère à l'élément qui a été rapide sur la portée, mais alors nous faisons parent.
Donc, maintenant, nous travaillons avec le mensonge qui englobe cette portée et puis nous faisons fadeout à la volée.
Donc, au lieu de fade out cela se réfère au mensonge pas la portée.
OK, nous allons enregistrer et revenir à rafraîchir.
Maintenant, nous obtenons un fondu agréable et si nous inspectons l'UL, nous n'avons plus qu'une seule vie.
Donc, il disparaît et puis supprime.
Pour résumer tout ici.
Le premier problème que nous avons rencontré était que nos événements de l'événement clic sur la portée a été effectivement déclencher l'événement à la volée ainsi après il a tiré la portée de celui-ci.
Donc, pour fixer que nous avons utilisé l'événement qui arrêtent la propagation qui l'empêche de bouillonner à d'autres éléments.
Et puis nous avons utilisé ce parent pour récupérer l'allié qui est entourant la portée qui a été cliqué sur et puis nous avons fané il.