[ERLEDIGT] Element nach klick verstecken

[AzRaIL]

Moinsen,

erstmal guten Rutsch und ein erfolgreiches neues Jahr :)

Nun zu meinem Problem:

Bei einem Projekt an dem ich derzeit arbeite gibts ein Formular (Über ne Komponente im CMS erstellt)

Die Struktur sieht folgendermaßen aus:

<input type="text">
<button type="submit" class="bfCalendar">
      <span>Datum</span>
</button>

Hab mal alles überflüssige (Klassen, Ids etc.) rausgelassen
Ihr könnt euch das als normales Inputfeld mit einem Symbol rechts (button) vorstellen worauf man klicken kann. Links davon steht "Datum". Sobald man auf den Button klickt erscheint ein Kalender wo man ein Datum auswählen kann was ebenfalls dann links vom Symbol angezeigt wird. Jedoch überlagert sich dann das span und das input.

Folglich möchte ich, dass bei klick auf den button das "Datum" verschwindet.
Dazu habe ich folgendes in jQuery geschrieben:

jQuery('.bfCalendar span').click(function() {
        jQuery(this).css('display','none');
});

Das funktioniert auch super im Chrome. Jedoch im Firefox nicht. Das span wird nicht auf display:none; gesetzt.
Wenn ich aber zb.

jQuery('.bfCalendar').click(function() {
        jQuery('.bfCalendar span').css('display','none');
});

benutze klappt es auch im Firefox, jedoch wird dann logischerweise jedes span innerhalb der Klasse auf der Seite auf display:none; gesetzt. Es gibt also mehrere Datumauswahlfelder mit derselben Struktur.

Nun meine Frage. Ist es möglich sowas wie this + 'span' oder so zu erzeugen damit sich das nur auf das jeweils angeklickte bezieht und nicht auf alle?

Hoffe das war einigermaßen verständlich formuliert. Ganz schön viel Text für so ein kleines Problem :)

lg

 

[threadi]

Versuchs mal so:

jQuery('.bfCalendar').click(function() {
        jQuery(this).jQuery("span").css('display','none');
});

 

[Tronjer]

Das Zauberwort heißt traversieren. <span> ist ein child von <button>.

$('.bfCalendar').click(function() {
  $(this).find('span').css('display','none');
});