jQuery von Kopf bis Fuß (German Edition)

Übersetzung der Anforderungen in Dinge, die für die App benötigt werden, braucht Übung.
    Unsere nächste Aufgabe besteht darin, den ersten Punkt oben abzuarbeiten: Listeneinträge mit der Klasse »fisch« zu finden und aus der Speisekarte zu entfernen. In Kapitel 2 haben wir Elemente mit Klassenselektoren ausgewählt und die
remove
-Methode benutzt, um sie aus dem DOM zu entfernen.
    In jQuery gibt es zusätzlich noch die
detach
-Methode. Beide Methoden können Elemente aus dem DOM entfernen. Worin besteht der Unterschied?

    Spitzen Sie Ihren Bleistift
    Benutzen Sie den freien Platz, um den Selektor sowie die
remove
-oder
detach
-Methode aufzuschreiben, die das Ergebnis auf der linken Seite hervorbringen.
    Spitzen Sie Ihren Bleistift: Lösung
    Benutzen Sie den freien Platz, um den Selektor sowie die
remove
-oder
detach
-Methode aufzuschreiben, die das Ergebnis auf der linken Seite hervorbringen.
    Probefahrt
    Bauen Sie den Code aus der dritten Lösung in die click-Funktion für den »Für Vegetarier«-Button ein und speichern Sie sie in Ihrer meine_skripts.js -Datei. Danach öffnen Sie die Seite im Browser Ihrer Wahl und überprüfen, ob alles wie gewünscht funktioniert.

    Die
detach
-Methode hat einiges entfernt, aber noch nicht alles, was wir loswerden wollten. Eigentlich müssen wir die gesamte Vorspeise entfernen, die innerhalb des Listeneintrags mit der Klasse »fisch« verschachtelt ist.
    Wie können wir das DOM anweisen, die gesamte Vorspeise zu entfernen?

Im DOM-Baum herumklettern
    In Kapitel 1 haben Sie erfahren, dass das DOM wie ein Baum aufgebaut ist: Es besitzt eine Wurzel, Äste und Knoten. Der JavaScript-Interpreter im Browser kann sich im DOM bewegen (und es dann verändern) – und besonders gut geht das mit jQuery. Sich im DOM zu bewegen, bedeutet, im DOM-Baum von einem Ast zum anderen auf und ab und hin und her zu klettern.
    Im Prinzip haben wir das DOM seit Kapitel 1 immer wieder verändert. Die gerade gezeigte detach-Methode ist ein Beispiel dafür (etwa das Entfernen von Elementen aus dem DOM).
    Aber worum geht es bei diesem auf Englisch »Traversal« genannten Konzept? Nehmen wir dafür einen Teil der Speisekarte und visualisieren ihn als DOM-Baum, um zu sehen, wie das Traversal funktioniert.

    Durch die Traversal-Methoden können Sie ein Element auswählen, aber tatsächlich mit anderen Elementen daneben, darüber oder darunter arbeiten.
    Wie diese Methoden funktionieren, wollen wir uns einmal genauer ansehen.

Traversal-Methoden bewegen sich im DOM
    Um dem DOM mitzuteilen, dass Vorspeisen entfernt werden sollen, die Fisch enthalten, müssen wir die Elemente anhand ihrer Beziehung zueinander angeben. Mit den Traversal-Methoden von jQuery können wir Elemente über ihre Beziehungen zueinander auswählen.

    Kopf-Nuss
    Welche dieser Methoden kann uns dabei helfen, die Vorspeisen zu entfernen, die Fisch (bzw. »fisch«) enthalten?

Methoden verketten, um weiter zu klettern
    Was, wenn wir höher, niedriger oder tiefer klettern wollen? Dann heißt es: Ketten anlegen! jQuery besitzt die Möglichkeit, Methoden zu verketten . Durch verkettete Methoden sind effizientere Bewegungen und Änderungen am DOM unserer Seiten möglich. Und das geht so:

    Übung
    Gehen Sie zur Adresse http://www.thinkjquery.com/chapter04/traversal/ und öffnen Sie die JavaScript-Konsole in den Entwicklerwerkzeugen Ihres Browsers. Im Abschnitt „Lies mich“ am Anfang dieses Buches werden verschiedene Entwicklerwerkzeuge vorgestellt. Führen Sie alle vier Traversal-Methoden mit einer verketteten
detach
-Methode aus, wie es unten gezeigt wird. Danach schreiben Sie hier auf, ob die Methode bei der Lösung unseres Problems helfen kann oder nicht. Den eingedeutschten Code finden Sie unter www.oreilly.de/catalog/hfjqueryger .
    Wichtig: Vergessen Sie nicht, die Seite neu zu laden , nachdem Sie die jeweilige Anweisung ausgeführt