Ankündigung

Einklappen
Keine Ankündigung bisher.

Löschbutton

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Löschbutton

    Hallo ich suche eine Möglichkeit einen Datensatz der per innerhtml gesetzt wurde wieder zu löschen. ich muss aber gestehen das mir absolut kein Ansatz einfällt wie ich das umsetzen könnte.

    Ziel ist es nach dem Laden der test.js alle Button zu setzen. Wenn mir einer "nicht gefällt" soll dieser per Bestätigung des Button löschen... wieder gelöscht werden. die anderen sollen erhalten bleiben. Das ganze soll naturlich ohne erneuten Seitenaufruf auskommen.




    test.html
    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta charset="UTF-8" />
    <title>test mit JS</title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="styles.css" />
    
    <script src="test.js"></script>
    
    </head>
     <body>
    
      <div id="messages">
       <p>Status Nachricht!</p>
      </div>
      <div id="submitbutton">
       <button type="submit">drück mich</button>
      </div>
    
     </body>
    
    </html>


    Meine test.js

    Code:
    $(document).ready(function(){ 
       var min = 1;
       var max = 9;
       var counter = Math.floor(Math.random() * (max - min)) + min;
    
       for (var i=0; i <= counter; i++ )
       document.getElementById("messages").innerHTML +=    
       "<button type='button' id="+i+">"+i+"</button>"+"<button type='button' id="+i+">löschen "+i+"</button>"+"<br>";
     }
    );
    Wie man schön sieht weiß ich nie wieviele button erstellt werden. Aber ich habe jeden Button schon mal eine ID mitgegeben, das war für mich der richtig Ansatz diesen zu identifizieren um diesen Datensatz dann auch zu löschen.

  • #2
    Hallo,

    ich denke die beste Lösung wäre es, alle Beiträge in eigene Formulare zu packen. Auf die Formulare registrierst du dann einen jQuery .submit() Handler, der den Formular GET bzw. POST abfängt. Dann hast Du die Daten aus dem Formular und kannst sie z. B. per Ajax Request an den Server senden => die Seite muss dafür nicht neu geladen werden.

    Alles andere wäre nur mit der Zeit sehr hässliches jQuery Selektor Gefrickel, das recht schnell unwartbar wird. Klar kann man z. B. nach Button IDs gehen, das wird aber wie gesagt recht unübersichtlich mit der Zeit.

    Hast du eventuell auch schonmal über Angular nachgedacht? Das wäre nämlich ein Paradebeispiel für eine Angular 1 bzw. 2 Anwendung. Also mit Direktiven um den HTML Inhalt würde sich dein Vorhaben wesentlich schöner abbilden lassen (und man wäre auch flexibler). Das wäre definitiv der sauberste Ansatz!


    MFG

    derwunner

    Kommentar


    • #3
      Du brauchst einen zusammenhängenden Block, zum Beispiel in einem <div>. Dem ersten Button in dem Block gibst du die Klasse "a". Der zweite Button in dem Block bekommt die Klasse "b".

      Die Klasse "a" bekommt ein click-Event $('.a') in dem du den zweiten Button $( this ).next() auf "enabled" (vorher dann natürlich disabled) setzt.

      Die Klasse "b" bekommt auch ein click-event $('.b') in dem der Button das div löscht $( this ).closest('div').html('');

      Wie du die "b"-Klasse Button dann wieder disabled, musst du gucken. Zum beispiel durch erneutes "a"-Klasse Button drücken.

      Kommentar

      Lädt...
      X