JavaScript jQuery: eingefügtes HTML Element lässt sich nicht entfernen

[safeload]

Hallo, ich versuche gerade über einen Link (a#ds1.einblenden_datenschutzerklaerung) mit jQuery HTML in die section.datenschutzerklärung einzufügen und diese (welche standardmäßig mit display: none; ausgeblendet ist) einzublenden, was auch funktioniert.

Mit Klick auf den Link (#ds1.einblenden_datenschutzerklaerung) wird die ursprüngliche Klasse (.einblenden_datenschutzerklaerung) desselben Links entfernt und durch die Klasse (.ausblenden_datenschutzerklaerung ersetzt).

var datenschutzerklaerung = "Test";     

edit: etwas irreführend... "Test" soll natürlich Platzhalter für späteres HTML sein!
  
    $('a.einblenden_datenschutzerklaerung').click(function () {
        $('section.datenschutzerklaerung').addClass('display_block');
        $('section.datenschutzerklaerung').prepend(datenschutzerklaerung);
        $('a#ds1').removeClass('einblenden_datenschutzerklaerung');
        $('a#ds1').addClass('ausblenden_datenschutzerklaerung');

    });

Nun soll über die neu zugeordnete Klasse wieder die Entfernung der Variablen und die Ausblendung der section.datenschutzerklärung getriggert werden.

$('a.ausblenden_datenschutzerklaerung').click(function () {
        $('section.datenschutzerklaerung').removeClass('display_block'); 
        $('section.datenschutzerklaerung').remove(datenschutzerklaerung);
        $('a#ds1').addClass('einblenden_datenschutzerklaerung');
        $('a#ds1').removeClass('ausblenden_datenschutzerklaerung');
      
    });

Das klappt aber nicht und der Link mit der neuen Klasse triggert lustig immer weiter die Hinzufügung der Variablen und blendet auch die section.datenschutzerklärung nicht aus.

Kann mir bitte jemand sagen, warum das nicht wie erwartet funktioniert?

 

[blablub1212]

Mach dir das einfach und nimm die show(), hide() und toggle() Methoden, die jQuery mitbringt:

https://www.w3schools.com/jquery/jquery_hide_show.asp

da findest du auch gleich einige Beispiele.

Bzw.: https://jsfiddle.net/hd3a9ykr/ (so meinst du das doch?!)

 

[xenon-seven]

$('a.ausblenden_datenschutzerklaerung').click(function () {
        $('section.datenschutzerklaerung').removeClass('display_block');
        $('section.datenschutzerklaerung').remove(datenschutzerklaerung);
        $('a#ds1').addClass('einblenden_datenschutzerklaerung');
        $('a#ds1').removeClass('ausblenden_datenschutzerklaerung');
    
    });

Ohne jetzt genau geguckt zu haben aber muss addClass und removeClass nicht genau umgekehrt sein?

 

[safeload]

Ohne jetzt genau geguckt zu haben aber muss addClass und removeClass nicht genau umgekehrt sein?

Nein, warum?

Ergänzung (21. August 2018)

Mach dir das einfach und nimm die show(), hide() und toggle() Methoden, die jQuery mitbringt:

https://www.w3schools.com/jquery/jquery_hide_show.asp

da findest du auch gleich einige Beispiele.

Bzw.: https://jsfiddle.net/hd3a9ykr/ (so meinst du das doch?!)

Der Punkt ist, daß ich die Datenschutzerklärung auf einer Seite, ohne duplicate Content zu erzeugen, an verschiedenen Stellen im DOM anzeigen und auch mit mehreren Links auf dieser Seite triggern möchte...

 

[xenon-seven]

Nein, warum?

Weil du beim Ausblenden die Klasse "einblenden_datenschutzerklärung" hinzufügst und "ausblenden_datenschutzerklärung" entfernst. Müsste logischerweise umgekehrt sein.

 

[safeload]

Weil du beim Ausblenden die Klasse "einblenden_datenschutzerklärung" hinzufügst und "ausblenden_datenschutzerklärung" entfernst. Müsste logischerweise umgekehrt sein.

Die Logik dahinter ist, daß der Link a.ausblenden_datenschutzerklaerung beim Klicken zum Link a.einblenden_datenschutzerklaerung werden soll.

Der geänderte Selektor soll dann wieder die Aktion Einfügen+Einblenden triggern.

$('a.einblenden_datenschutzerklaerung').click(function () {
        $('section.datenschutzerklaerung').addClass('display_block');
        $('section.datenschutzerklaerung').prepend(datenschutzerklaerung);
 });