abc: Elemente aus der Dropdownliste entfernen

Hallo Leute!

Etwas in der ArtIch hoffe ihr könnt mir weiterhelfen... Ich suche nach einer Lösung, wie ich per Knopfdruck ein Element aus einer Dropdownliste entfernen kann. Am besten ist der Knopf auch schon in der Liste integriert.

Und drückt man auf den Mülleimer wird der Eintrag gelöscht.

Schon mal danke im voraus

  1. Hallo abc,

    Ich suche nach einer Lösung, wie ich per Knopfdruck ein Element aus einer Dropdownliste entfernen kann.

    Die JavaScript-Methode um Elemente zu entfernen heißt remove().

    Am besten ist der Knopf auch schon in der Liste integriert.

    Da option-Elemente nur Text enthalten dürfen, ist das schon mal nicht so ohne weiteres möglich.

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. Die JavaScript-Methode um Elemente zu entfernen heißt remove().

      Am besten ist der Knopf auch schon in der Liste integriert.

      Da option-Elemente nur Text enthalten dürfen, ist das schon mal nicht so ohne weiteres möglich.

      Das ändert aber leider mein Problem nicht. Gibt es denn vergleichbare Dinge die sich leicht bewerkstelligen lassen?

      1. Hallo abc,

        Das ändert aber leider mein Problem nicht. Gibt es denn vergleichbare Dinge die sich leicht bewerkstelligen lassen?

        Bestimmt. Das kommt ganz auf dein Problem an. ;-) Was möchtest du denn erreichen? Gibt es schon etwas, was du zeigen kannst?

        Bis demnächst
        Matthias

        --
        Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      2. Tach!

        Da option-Elemente nur Text enthalten dürfen, ist das schon mal nicht so ohne weiteres möglich.

        Das ändert aber leider mein Problem nicht. Gibt es denn vergleichbare Dinge die sich leicht bewerkstelligen lassen?

        Es gibt eine Menge bereits fertiger Komponenten, die eine Select-Liste mit beliebigem Inhalt nachbilden können. Aber frag mich nicht nach Empfehlungen. Mir fallen noch nicht mal gescheite Stichwörter zum Suchen ein, lediglich "Mega Menu".

        dedlfix.

        1. @@dedlfix

          Es gibt eine Menge bereits fertiger Komponenten, die eine Select-Liste mit beliebigem Inhalt nachbilden können.

          Wovon nur ein Bruchteil (wenn überhaupt) bedienbar ist. Bedienbar im Sinne von bedienbar, nicht von „sieht so aus wie bedienbar“.

          Aber frag mich nicht nach Empfehlungen.

          Es gibt die Empfehlung, select/option nicht mit anderen Elementen nachzubauen.

          LLAP 🖖

          --
          “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
          Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
    2. @@Matthias Apsel

      Da option-Elemente nur Text enthalten dürfen, ist das schon mal nicht so ohne weiteres möglich.

      Aber mit Weiterem ([EDIT] jedenfalls im Firefox):

      Symbol (Mülleimer o.ä.) per CSS hinzufügen und rechts ausrichten; bei Click abfragen, ob im option-Element auf das Symbol geclickt wurde, wenn ja: Option entfernen, vorher gewählte Option wieder anwählen: select with remove-option function.

      Offene Frage: Was soll passieren, wenn die vorher angewählte Option entfernt wird?

      Die Lösung funktioniert freilich nur bei Mausbedienung; nicht per Tastatur. Ist als progressive enhancement vielleicht verschmerzbar.

      LLAP 🖖

      --
      “There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
      Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
  2. Du wirst dafür eine fertige Komponente finden und anpassen oder selbst was bauen müssen. Ich glaube nicht, dass es genau so etwas schon fertig gibt.

    Zum Selberbau würde ich dir vorschlagen, dir hier im Forum den "Foren" Button im Menü anzuschauen. Da kannst Du eine Liste ausklappen. Diese Liste enthält hier Text und einen Statistik-Link, aber statt des Statistiklinks kannst Du ja auch einen Button einsetzen und dessen click-Event behandeln.

    Wenn Du den Button kennst, auf dem click ausgelöst wurde, suchst Du das li in dem er enthalten ist und schmeißt es aus seinem parent Element heraus. Das ist natürlich nicht ganz trivial, weil Du ja vermutlich nicht nur die Zeile aus dem DOM schmeißen willst, sondern ggf. auch noch dein Datenmodell anpassen musst. Hier sind UI Mapping Tools wie knockout ganz interessant: Du änderst das observableArray, auf dem die Liste basiert, und knockout ändert das DOM automagisch.

    So, das ist die Idee - vielleicht kannst Du ja was daraus machen. Eine fertige Lösung die exakt auf deine Wünsche passt wird's wohl eher nicht geben.

    Rolf

    1. danke, das werde ich versuchen

      1. ok. Ich habe etwas gefunden. Zwar auf einer anderen Website aber es funktioniert mittlerweile weingistens.

        Hier ist der Link dazu

        Mithilfe dieses Javascripts habe ich dann das auf meine Seite verbastelt. Diese habe ich natürlich verändert und als beispielhaftes Logo das Intel genommen.

        Hier ist der gesamte Quelltext - auch wenn alles in einer Datei ist und unsortiert ist - es funktioniert.

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <style>
               #one {font-family:Arial,sans-serif; font-size:20px; color:#5044FF;}
               #two {font-family:Arial,sans-serif; font-size:16px; color:black;}
        
               input[type="text"] {
               width: 200px;
               height: 20px;
               padding-right: 50px;
        }
                input[type="password"]{
                width: 200px;
                height: 20px;
                padding-right: 50px;}
        
                input[type="button"] {
                 margin-left: -25px;
        
                 height: 20px;
                 width: 20px;
        }
        
        
        
        .img {
          width: 20%;
          height: auto;
          margin-left: 75%
        }
        #fussbereich {
            position:absolute;
            bottom: 0;
            width: 100%;
            background-color: #5044FF;
            height: 2em;
        }
            </style>
            <title>Titel</title>
        </head>
        
        <body>
        <h2 id="one"> <center> Verwaltung </center> </h2>
        <img class="img"  src="http://www.dafont.com/forum/attach/orig/4/3/437018.png?1" >
        
        
        <style type="text/css">
        .centered{
            background-color: #DDDDDD;
            border-radius: 10px 10px 10px 10px;
            height: 500px;
            left: 50%;
            margin-left: -175px;
            margin-top: -75px;
            padding: 25px;
            position: absolute;
            top: 20%;
            width: 800px;
            text-align:center;
        
            font-size: 15pt;
        }
        
        </style>
        
        <script>
            var selectElement = document.getElementById('selectElement');
        
            for(var i=0;i<5;i++){
              var option = document.createElement('option');
              option.text = 'Text '+i;
              option.value = i;
              selectElement.options[i] = option;
            }
        </script>
        <div>
            <center>
                <form>
                <table>
                    <tr>
                        <th style="text-align:left" id="two">Zugelassene User:</th>
                        <th><input type='text' name='user' id="user"></th>
        
                    </tr>
                    <tr>
                        <td><div id="createButtons"></div></td>
                        <td>
        
                            <ul style="font-family:Arial,sans-serif; font-size:16px; color:#5044FF;" id="list"></ul>
                            </td>
        
                    </tr>
        
        
                     <tr>
                         <td></td>
                            <td>
                                <!--<input type="button" onclick="javascript: document.getElementById('5').value='';" class="edit" >-->
        
        
                             </td>
                         <!--<td colspan="6">&nbsp;</td>-->
                     </tr>
        
        
        
                        <tr>
                            <th style="text-align:left" id="two">Name:</th>
                            <th><input type='text' name='name' id="name" ></th>
        
                    </tr>
                    <tr>
                        <th style="text-align:left" id="two">Passwort:</th>
                        <td><input class="password" type="password" id="pw" name="password"></td>
                    </tr>
        
        
                    <tr>
                        <td colspan="6">&nbsp;</td>
                    </tr>
        
                    <tr>
                        <th style="text-align:left" id="two">Irgendeine URL:</th>
                        <th><input  type='text' name='url' id="url"></th>
        
        
                </table>
                    </form>
            </center>
        
            <p>.</p>
        
        <script>
        
        (function(){
        	var test = ["User Hinzufügen"];
        	var buttonContainer = document.getElementById("createButtons");
        	test.forEach(function(item){
        		var button = document.createElement("button");
        		button.innerHTML = item;
        		button.addEventListener("click", function(){
        		    var unloadCheck = false;
        			addItem(item);
        		}, false);
        		buttonContainer.appendChild(button);
        	});
        	var list = document.getElementById("list");
        	var unloadCheck = false;
        	function addItem(item){
        		var li = document.createElement("li");
        		li.item = item;
        		user = document.getElementById('user').value;
        		li.appendChild(document.createTextNode(user));
        
        		var deleteButton = document.createElement("button");
        		deleteButton.innerHTML = "X";
        		deleteButton.addEventListener("click", function(){
        			list.removeChild(li);
        		}, false);
        		li.appendChild(deleteButton);
        
        		var beforeLi = null;
        		for (var i = 0, l = list.childNodes.length; i < l; i += 1){
        			if (list.childNodes[i].item > item){
        				beforeLi = list.childNodes[i];
        				break;
        			}
        		}
        		list.insertBefore(li, beforeLi);
        	}
        }());
        
        
            function varStorage(){
            user = document.getElementById('user').value;
            name = document.getElementById('name').value;
            hook = document.getElementById('url').value;
            shoppw = document.getElementById('pw').value;
            alert(user + " " + name + " " + pw + " " + url )
            }
        
            var unloadCheck = true;
        window.onbeforeunload = function() {
            if (unloadCheck) {
                return "Sie verlieren ggf. Ihre letzten, nicht gespeicherten Eingaben!";
            } else {
                return;
            }
        }
        
         function speichern() {
            var ask = window.confirm("Wollen sie wirklich speichern? Einträge werden überschrieben.");
            if (ask) {
                window.alert("Erfolgreich gespeichert");
                unloadCheck = false
                document.location.href = "http://google.de";
        
            }
        }
        
        
        </script>
        
        
            <center><input style="height: 40px; width: 100px;" type="submit" value="Abbrechen" onClick="parent.location='http://localhost'"/>
            <input style="height: 40px; width: 100px;" type="submit" value="Speichern" onClick="speichern()"/></center>
        <center>
         <div id="fussbereich">
             <center><input style="height: 32px; width: 173px;" type="submit" value="Abmelden" onClick="parent.location='http://localhost'"/></center>
         </div>
            </center>
        </body>
        </html>
        
        1. Zur Bewertung:

          1. Ich war's nicht.
          2. Ich halte es für falsch die Beweggründe nicht mitzuteilen.
          3. Es ging dem Bewerter wohl darum, aufzuzeigen, dass sich niemand ein Vorbild an Deinem Code nehmen soll.

          Stichworte:

          • <center> - Verworfene HTML-Tags
          • onClick - Verworfene Eventhandlerzuweisung
          • .centered - Klassenname nach erwünschtem Aussehen (das kann sich ändern und dann ist .centered rechtssbündig ...)

          Insgesamt ist das gezeigte "ganz schön heftig". Gib Dir künftig mehr Mühe - oder besser noch: Reduziere auf das Wesentliche.

          Und dann noch das hier:

          aber es funktioniert mittlerweile weingistens.

          Damit wertest Du Dir gewährte Hilfe ab. Das, lieber Freund, ist keine Unhöflichkeit, sondern eine Gemeinheit die Du selbst nicht erleben willst.

          1. Hallo Mistfinder,

            1. Ich war's nicht.
            2. Ich halte es für falsch die Beweggründe nicht mitzuteilen.
            3. Es ging dem Bewerter wohl darum, aufzuzeigen, dass sich niemand ein Vorbild an Deinem Code nehmen soll.
            1. Stimmt. Unangemeldete dürfen nicht bewerten. Ich wars.
            2. Hab ich dann aus den Augen verloren und auch an Perlen und Säue denken müssen, weil ich die begründete Vermutung habe, dass der OP auf lange Sicht nicht mehr hier vorbeischauen wird.
            3. Stimmt

            Stichworte:

            • <center> - Verworfene HTML-Tags
            • onClick - Verworfene Eventhandlerzuweisung
            • .centered - Klassenname nach erwünschtem Aussehen (das kann sich ändern und dann ist .centered rechtssbündig ...)

            Die Liste lässt sich beinahe beliebig fortsetzen.

            • Layouttabellen

            • warum müssen die Buttons (und options) überhaupt mit JS erzeugt werden?

            • „X“ ist eine schlechte Beschriftung für einen Löschen-Button

            • Username und Passwort werden als URL-Parameter übermittelt

            • mehrfache IDs, „two“ als Bezeichner ist ziemlich sinnfrei.

            • inlinestyles, position: absolute, Größenangaben in Pixeln, zentrieren geht auch anders

            • der „Abbrechen“-button ist ein submit, wobei reset-buttons ohnehin nicht viel Sinn ergeben.

            • mit der Fragestellung hat der gezeigte Code auch nichts zu tun, zumindest kann man es nicht sehen, weil es kein select-Element gibt

            Bis demnächst
            Matthias

            --
            Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.