OK we komen terug op de X-knop hier te komen de volgende eigenschap die ik wil aan te pakken is.
Dus toen we op deze X moet eigenlijk compleet verwijderen Om dit te doen niet alleen grijs, maar het zou eigenlijk fade-out en te verwijderen.
Dus het ziet er als volgt uit over de definitieve versie.
We hebben niet hetzelfde pictogram te klikken op in dezelfde kleuren of de animatie, maar de functionaliteit als ik klik op iets moet hetzelfde zijn.
Dus laten we zeggen dat ik klaar ben met gerechten.
Het vervaagt en verdwijnt dan.
En het is niet meer hier is het helemaal weg.
OK.
Het eerste wat we willen doen is luisteren voor een klik op een van deze exen.
En in onze tijd Tim zal ik onthouden dat we elk een spanwijdte, zodat we gemakkelijk dat kunnen doen.
Anders als we hadden net een X als onderdeel van de leugen is er geen manier om te bepalen of onze klik is op de X of als het op de rest van de weg.
Dus we er geweest en nu gaan we naar een javascript en laten we toe te voegen in een andere reactie.
Klik op X om te verwijderen om te doen dus we zullen beginnen met de gebeurtenis click.
Dus dollarteken.
Selecteer alle spand En u klikt opnieuw en dan hebben we behoefte aan een callback functie en in plaats van ons callback we gewoon nog een klik op een overspanning net als dat en we komen terug gaan vernieuwen klikken we op de leugen er gebeurt niets.
Zodra we op de overspanning krijgen we een waarschuwing die zegt dat je hebt geklikt op deze overspanning.
Er is een klein probleem dat je misschien nog niet opgevallen toen ik op de overspanning klikken en klik vervolgens op de X krijg ik de melding dat ik verwacht te krijgen, maar ook aandacht schenken als ik de waarschuwing verworpen.
We krijgen ook de stijlen die afkomstig zijn uit de klik evenement.
Dus wat dat ons vertelt, is dat de spam evenement wordt afvuren en dan daarna de ly gebeurtenis click wordt afvuren ook.
En dat doet zinvol omdat onze overspanningen zijn binnenkant van de bondgenoten.
Dus toen we op een overspanning toen ik op deze overspanning bijvoorbeeld in het midden klik laten inspecteren Ik ben te klikken op deze overspanning maar dat is ook de Spaanse in de bondgenoot.
Dus vanuit een ander perspectief Ik ben te klikken op de leugen.
Maar vanuit een ander perspectief Ik ben te klikken op de goed ook, want al deze zijn in plaats van een UL of op de div id container of op het lichaam of op het team element dat een klik op deze overspanning gaat door je kent vijf of zes verschillende lagen.
Dus toen we in event listener toe te voegen aan de overspanning of om de bondgenoot of als we hadden een evenement luisteraar en alle van hen, die ik je nu zal je laten zien.
Dus laten we hier toevoegen nog een event listener en deze zal op de wil en we zullen gewoon-waarschuwing geklikt UIL en zal men meer te doen.
En deze zal op de divx ID container en dit zal zeggen op container div en eigenlijk zal het doen op het lichaam ook.
En dit zal zeggen op het lichaam.
OK.
Dus klikken we op de overspanning die in plaats van een bondgenoot in plaats van een UL plaats van de houder binnenkant van het lichaam.
Laten we nu eens aandacht besteden als we vernieuwen om de orde dat de dingen in brand.
Dus eerst Ik klik op de overspanning en het vertelt me ​​klikte op de overspanning en dan heb ik weet niet of je opgevallen, maar de gebeurtenis click vuur dat doet goed, dat is hoe we de stijlen daar.
En dan is het goed klikt gebeurtenis dan de container div en dan is het lichaam uiteindelijk.
Zodat voorbeeld illustreert een verschijnsel genaamd event borrelen.
Wat er gebeurt is dit evenement voor het eerst wordt geactiveerd op de overspanning en dat is waar het afkomstig is.
Maar dan borrelt het in twee bovenliggende elementen.
Het borrelt zo omhoog in de leugen en het zal elke zoals klikgebeurtenissen activeren en vervolgens van daaruit borrelt aan de blik naar de put die zal leiden tot elke goed klikt evenement en zo verder tot het raakt de HTL element waar het stopt om te voorkomen dat liggen.
Klik handler van triggering toen we op de overspanning die zich in de Y.
Wat we wel kunnen doen is het evenement binnenkant van de overspanning niet bubble eigenlijk niet meer te vertellen.
Gewoon om te stoppen in zijn tracks en andere evenementen op bovenliggende element niet geactiveerd.
Dus ik zal je dat hier laten zien.
Alle we moeten doen in plaats van deze overspanning snel luisteraar voegen we in het geval object.
En ook dit kan E event T. worden genoemd
Elke naam die u wilt dat de meest voorkomende is gebeurtenis of e.
En wat we zullen doen is het toevoegen van een methode genaamd evenement stop voortplanting.
Dit is een J coderingswerkwijze dat geval zal stoppen opborrelen.
Zo zal het vuur op de overspanning, maar het zal niet verder op dergelijke luisteraar of een van deze die we hebben voor die kwestie.
Dus als we op te slaan en te vernieuwen.
En nu heb ik op een overspanning ik nog steeds mijn klikte op de overspanning en dan stopt het.
We hebben geen van die andere luisteraars die we hadden opgezet afvuren een ander we hebben de overspanning luisteraar correct ingesteld te krijgen.
Laten we vul het in met de juiste code.
Wat we moesten doen is wanneer we op een overspanning Ik kom terug naar de browser gaan wanneer we op een van deze.
We willen deze leugen te verwijderen, zodat de leugen dat bevat het kan vernieuwen.
Ik klik op deze overspanning het nodig heeft om deze leugen te verwijderen en te doen dat we kunnen starten vanaf de overspanning met behulp van dollarteken dit en als we gewoon dollars doen op deze verwijderen of fade-out, maar we beginnen met verwijderen.
En we gaan terug.
Alles wat er gebeurt, is dat de overspanning verdwijnt.
We op dit moment zijn het verwijderen van de overspanning.
We moeten de omsluitende element te verwijderen en Shakeri geeft ons echt een leuke en eenvoudige manier om dat te doen.
Alles wat we moeten doen is dit schrijf ouders te verwijderen en dat ook daadwerkelijk ons ​​de bovenliggende element als een query-element.
Dus dit is een overspanning dat we geklikt ouder geeft ons de leugen verwijderen wordt de gehele bondgenoot te verwijderen.
Dus nu als ik refresh je kunt zien verdwijnt en weer te vernieuwen.
Maar als ik op de vlieg klik controleert vlak bij de laatste verbetering die we kunnen maken is in plaats van het onmiddellijk verwijderen.
Het is vervaagd.
Dus we doen een dot fade-out en beginnen weer terug te gaan vernieuwen we klikken en het verdwijnt.
Maar vergeet gewoon montage it out niet daadwerkelijk verwijderen.
Het is nog steeds hier als we inspecteren in plaats van onze je goed we hebben nog drie te doen is slechts twee van hen hebben geen weergave.
En we willen niet dat dat gebeurt.
Stel je voor dat we een duizend te verliezen dat we hadden verwijderd.
Nou we willen niet om dingen te vertragen door het hebben van meer dan duizend verborgen elementen op de pagina.
Dus wat we zullen doen in plaats daarvan is het gebruik te verwijderen, maar vergeet niet het niet alleen werkt om dit te doen.
Het zal het te verwijderen, maar het zal niet wachten tot de fade out tot eind.
Als we willen zo snel laten zien dat we op het begint te vervagen en dan onmiddellijk na het verwijdert als we willen dat de fade-out om alles wat we moeten doen eindigen is gebruik maken van de callback we kunnen overgaan in fadeout die nadien zal draaien.
En laten we het eens te duur en laten we zeggen vijfhonderd milliseconden om te beginnen.
En toen het klaar is kunnen we niet gewoon bellen te verwijderen op zijn eigen.
We moeten het doen op een element en het element we het willen noemen on is dezelfde die we invullen, zodat we een dollarteken kan gebruiken.
Dit is belangrijk om op te merken dat dit recht is hier niet hetzelfde dollarteken dit recht hier.
Dus laten we lopen door dat het een beetje ingewikkeld wanneer we klikken op een Spaans dollarteken.
Dit verwijst naar het element dat snel op de overspanning was, maar dan zijn we ouder doen.
Dus nu zijn we samen met de leugen dat die spanwijdte omsluit en dan zijn we fadeout doen op de vlieg.
Dus in plaats van fade out dit verwijst naar de leugen niet de overspanning.
OK dus we zullen slaan en terug te gaan vernieuwen.
Nu krijgen we een mooie fade out en als we inspecteren de UL we maar één leven links.
Dus het vervaagt en vervolgens verwijdert.
Om alles hier samen te vatten.
Het eerste probleem dat we tegenkwamen was dat onze events de klik evenement op de overspanning was eigenlijk het afvuren van de gebeurtenis op de vlieg en nadat het in brand gestoken de spanwijdte van het.
Dus om vast te stellen dat we gebruikten geval dat vermeerdering die het stopt uit borrelen tot andere elementen te stoppen.
En dan gebruikten we die ouder naar de bondgenoot die bijvoeging van de overspanning die werd geklikt op te halen en vervolgens verdween we het uit.