Helmut: Button, Wert aus angezeigten FORM löschen. Wie hier bei Schlagwort Vorschlag

SELF-Forum

Button, Wert aus angezeigten FORM löschen. Wie hier bei Schlagwort Vorschlag

Helmut
– Informationen zu den Bewertungsregeln

Ich möchte über ein Formular mehrere Buttons einbinden. Die schon vorgegeben sind, so ähnlich wie hier untern:

die einzelnen Buttons sind als html,form,button hinterlegt

<button name ="button_1" id="button_1">Beispiel</button>

sind.

Diese würde ich dann, genauso wie hier mittels eines Klicks wieder löschen können.

Mein erstes Problem ist jetzt aber erst mal, wie heißt den dieser Vorgang, nach was kann ich im WWW suchen um fündig zu werden?

Das wäre Super.

Helmut

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Button, Wert aus angezeigten FORM löschen. Wie hier bei Schlagwort Vorschlag

    Henry
    – Informationen zu den Bewertungsregeln

    Hallo Helmut,

    einfachste Lösung:

    <button onclick="this.style.display='none';">abc</button>

    nicht mehr sichtbar, oder

    <button onclick="this.remove();">abc</button>

    gar nicht mehr vorhanden

    Anstatt inline gehts natürlich auch über eventlistener. Du müsstes dich also insgesamt über Eventhandler insebesondere Click-Event informieren.

    Gruss
    Henry

    --
    Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Button, Wert aus angezeigten FORM löschen. Wie hier bei Schlagwort Vorschlag

    Rolf B
    +1 Informationen zu den Bewertungsregeln

    Hallo Helmut,

    es gibt grundsätzlich zwei Ansätze.

    Die Schlagwort-Buttons hier im Forum werden dynamisch erzeugt, nicht eingeblendet. Dafür suchst Du nach createElement('button') und appendChild. Zum Entfernen suchst Du nach removeChild.

    Ein Objekt im DOM hat mehrere Schnittstellen. Die grundlegende Schnittstelle ist Node, die drei genannten Methoden gehören dazu. Nodes können vielerlei sein: einfacher Text, Kommentare, Attribute, die <!doctype html> Deklaration, und Elemente.

    Elemente haben die weitere Schnittstelle Element. Dort finden sich noch weitere Methoden zum Modifizieren des DOM Objektbaums: append, prepend und insertAdjacentElement.

    Das Dokument, das dein Browser anzeigt, ist ein weiterer Node-Typ, der die zusätzliche Schnittstelle Document anbietet.

    Folge den Links in unser Wiki, um mehr zu erfahren.

    Wenn Du auf diesem Weg einen Button erzeugen willst, musst Du zuerst mit der createElement Methode des document-Objekts ein button-Element erzeugen. Das ist eine Fabrikmethode, die Dir ein Element-Objekt mit den speziellen Schnittstellenergänzungen für Buttons liefert (die HTMLButtonElement -Schnittstelle - da ist der Javascript-Teil unseres Wiki schwach und ich muss auf die Mozilla-Doku verweisen). Du musst dem Button die erforderlichen Eigenschaften geben (die bis auf Groß-/Kleinschreibung den gleichen Namen tragen wie die HTML Attribute - aber du musst sie genau richtig schreiben, weil JavaScript zwischen den Namen dingsbums und dingsBums unterscheidet), und ihn dann an die richtige Stelle in den Objektbaum des DOM hängen. Dafür dienen die genannten Methoden.

    Der zweite Ansatz besteht darin, alle Buttons bereits im HTML stehen zu haben und sie mittels CSS Eigenschaften sichtbar zu machen oder zu verstecken. Das geht bei einer kleinen, überschaubaren Anzahl. Hier im Forum geht es nicht, es gibt zu viele Schlagworte. Das Sichtbarmachen kannst Du mit einer Klasse wie "aktiv" steuern, die Du dem jeweiligen Button zuweist oder wegnimmst, oder wie Henry vorschlug mit CSS Inline Styles. Klassen sind aber eigentlich besser, weil Du damit dann auch via querySelectorAll alle aktiven Buttons finden kannst.

    Aber - wenn Du die Buttons bereits alle im HTML stehen hast - warum willst Du dann Buttons verwenden? Ist eine Liste mit Checkboxen nicht viel sinnvoller? Die kannst Du sogar wie Buttons aussehen lassen:

    <ul id="optionen">
<li>
  <label><input type="checkbox" name="ausw1"><span>Auswahl 1</span></label>
</li>
<li>
  <label><input type="checkbox" name="ausw2"><span>Auswahl 2</span></label>
</li>
<li>
  <label><input type="checkbox" name="ausw3"><span>Auswahl 3</span></label>
</li>
<li>
  <label><input type="checkbox" name="ausw4"><span>Auswahl 4</span></label></li>
</ul>

    Die Listenpunkte kannst Du mit list-style-type:none verstecken, aber eine Liste ist eine Liste und sollte auch so aufgeschrieben werden.

    Mit dem CSS Selektor #optionen input:checked ~ span kannst Du den Text hinter der Checkbox umstylen, wenn die Auswahl aktiv wird. Du kannst die Checkbox selbst auch verstecken - wegen des Labels kann man auf den Auswahltext klicken und die Checkbox reagiert.

    Rolf

    --
    sumpsi - posui - obstruxi
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln