• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JQuery: To -Do-Liste/Elemente löschen

C

Curryking

Neues Mitglied
Hallo Forum,

ich habe ein Problem, und würde mich freuen, wenn mir jemand helfen kann:

Folgende To-Do Liste erstellt auf Knopfdruck Einträge. Jedoch werden die Einträge mit meiner "weg" Funktion leider nicht gelöscht, sondern nur der Button (Mit "this" und "parent" wollte ich genau diesem Problem entgegen wirken). Außerdem formatiert er den ersten delete Button mit JQUery, die Buttons die automatisch eingefügt werden leider nicht.

HTML:


<!DOCTYPEHTML>

<html>

<head>

<linkrel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />

<scriptsrc="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<scriptsrc="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<metahttp-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<scriptsrc="funktionen.js"></script>


<title>Daten übergeben</title>

</head>

<body>



<ul id="todolist">

<li>Hallo<button class="delete">delete</button></li>

<li>Hall2<button class="delete">delete</button></li>

</ul>



<input type="text" id="newtext"/><button id="add">Abschicken</button>




</body>

</html>



Java:


/**

*@authorFaSt

*/



$(function(){

$(".delete").on('click',weg)

$("#add").on('click',addListItem)



});



function addListItem(){

var text = $("#newtext").val();

$('#todolist').append('<li>'+text+'<button class="delete"></button></li>');

$("#newtext").val('');

}


function weg(){

$(this).parent().remove();



}
 
Folgende To-Do Liste erstellt auf Knopfdruck Einträge. Jedoch werden die Einträge mit meiner "weg" Funktion leider nicht gelöscht, sondern nur der Button (Mit "this" und "parent" wollte ich genau diesem Problem entgegen wirken).
Zum Vergrößern anklicken....

Parent ist ja auch das <li> hier.

Außerdem formatiert er den ersten delete Button mit JQUery, die Buttons die automatisch eingefügt werden leider nicht.
Zum Vergrößern anklicken....

Versuch mal:
Code: 
$('body').on('click','#add',addListItem)
 
danke für deine Antwort!

Habe deine Idee jetzt genommen und für meinen "add" Teil ausgetauscht. Und da ändert sich leider nichts bezüglich dem Button Desgin.

Und <li> wollte ich ja auch löschen: Die löschen Funktion zielt darauf ab, immer eine eingefügte Zeile (<li>) wieder löschen zu können. Ich habe diese Funktion nicht selber entworfen sondern 1:1 aus diesem Video genommen. Im Video geht es, bei mir nicht :(

 
Die leeren Buttons von addListItem() ergeben sich dadurch, dass du das Wort delete zwischen den Tags vergessen hast. Bei meiner geposteten Funktion ist mir ein Lapsus unterlaufen: Das $('body').on() muss auf weg(), also

Code: 
$("body").on("click",".delete",weg)
 
Curryking schrieb:
Ich verstehe zwar nicht, warum mein Code nicht geht aber Hauptsache es läuft. Vielen Dank für die Hilfe!!!!!
Zum Vergrößern anklicken....

Das liegt daran, dass der Eventlistener on() auf Elemente angewendet wird, die per addListItem() nachträglich ins DOM eingefügt werden. In dem Fall muss das jQuery-Objekt, auf welches die Methode aufgerufen wird, in der HTML-Hierarchie oberhalb des Buttons liegen. Mit dem <body> ist man da auf der sicheren Seite.
 
Danke für die Erklärung!
Wenn ich nun im selben Beispiel nicht nur den eingegeben Text, sondern auch ein ausgewähltes Element aus einer "Select Option" mit dem Button "Abschicken" will, wie binde ich das ein?

Habe also im HTML Teil eine Select Option mit der ID= auswahl eingefügt.

Im Java Script Teil komme ich aber nicht weiter:

function addListItem(){

var text = $("#newtext")+("#auswahl").val();

$('#todolist').append('<li>'+text+'<button class="delete">delete</button></li>');

$("#newtext").val('');

}

wie verknüpfe ich "newtext" und "auswahl" so, dass beide auf Knopfdruck abgeschickt werden?

P.S: Falls wer ein gutes Tutorial (egal ob Video oder Skript) kennt, indem Funktionen erklärt werden (z.B. Auflistung und Erklärung aller Befehle in JQuery),immer her damit :)
 
Code: 
var text = $("#newtext")+("#auswahl").val();

Das gibt einen Javascript-Fehler.

Was genau willst hier denn tun: Den val() eines Elements mit der ID #auswahl, welches wiederum in einem Element mit der ID #newtext liegt, in var text speichern? Dann wäre die Selektion wie in CSS:

Code: 
$("#newtext #auswahl")

oder willst du zwei val() verknüpfen, die in unterschiedlichen Elementen liegen? Dann würde ich es so versuchen:

Code: 
var text = $("#newtext").val() +  " " + $("#auswahl").val()

In der jQuery Doku werden alle Funktionen mit Beispielen erläutert.
 
Danke für deine schnelle Antwort, sry für meine späte :)
Ich möchte, dass der Benutzer seinen Termin eingibt, dann aus einem Auswahlfeld eine Option aussucht und dann auf abschicken klickt. Wenn er den Knopf Abschicken drückt, erscheint vor ihm sein Termin und die gewählte Option. Wenn man mehrere Termine eingibt wird darauß also eine Liste. Die wiederum würde ich gerne begrenzen, also sagen man kann z.B. nur 5 Termine pro Tag eintragen.....

Viele Fragen und ein schlauer Tronjer ;)
 
Curryking schrieb:
Viele Fragen und ein schlauer Tronjer ;)
Zum Vergrößern anklicken....

Wenn du willst, dass ich dir das schreibe, musst du den Weg über die Jobbörse antreten. ;)

Was du dir hier vorstellst, ist schon etwas komplexer. Um mit Terminen zu arbeiten, sollten sie nicht als String sondern als Date-Object angelegt und außerdem gespeichert werden, was eine Schnittstelle zur Datenbank erfordert. Der User trägt seinen Termin im Formular ein, darauf wird ein Server-Request gesendet und wenn für den entsprechenden Tag nicht mehr als 5 Einträge vorhanden sind, wird der Termin bestätigt. Ansonsten erhält er eine Fehlermeldung.

Zu überlegen wäre auch, für die komfortable Termineingabe eventuell das Datepicker-Widget von jQuery UI einzubauen.
 
Hatte gehofft, das wäre nicht ganz so kompliziert.... Na gut, aber mit dem Datepicker wollte ich eigentlich nicht arbeiten. Ich habe Fenster erstellt mit den Wochentagen als Überschrift und in die kann man dann den Namen des Termins und eben aus der Auswahlliste die Aufgabe eintragen. Hatte gehofft das es einen befehl gibt der eben ein Fenster öffnet und ab 5 Terminen sagt: Es sind zu viele Termine!

Noch eine Frage zu deinem Code der beide vom Nutzer eingetragenen Felder auf einen Knopfdruck abschicken soll:

  1. var text = $("#newtext").val() + " " + $("#auswahl").val()


    Es funktioniert bei mir nur bedingt: Newtext ist kein Problem den gibt er wunderbar wieder, aber beim Auswahlfeld gibt er mir nur die Nummer des Auswahlfeldes wieder: z.b. steht statt Gartenarbeit nur 1 da.....


    Ich danke für dein Wissen und hoffe ich muss noch nichts bezahlen :D
 
Es funktioniert bei mir nur bedingt: Newtext ist kein Problem den gibt er wunderbar wieder, aber beim Auswahlfeld gibt er mir nur die Nummer des Auswahlfeldes wieder: z.b. steht statt Gartenarbeit nur 1 da.....
Zum Vergrößern anklicken....

Dann hast du irgendwo einen Fehler. Gib doch in der Konsole von Firebug mal $("#auswahl").val() ein und schaue, was du als Rückgabe erhältst.

Für die Begrenzung auf 5 Listenelemente würde ich das append() in eine if-Abfrage einbetten und die Anzahl der Kindelemente zählen, also etwas wie:

Pseudocode:
Code: 
if ( $('#todolist li').length < 6 ) {
  // hänge Termin an
} else {
  alert('Fehler');
}

Das ist aber alles rein clientseitig und nach einem Seitenrefresh wieder weg. Wenn du etwas senden willst, musst du dir überlegen, was du sendest, wie du es sendest und wo du es speicherst.
 
Erstmal nochmal vielen Dank für deine schnelle und super Hilfe ;) Fehler hat sich gefunden, ich hatte als Value Zahlen eingetragen im html Text :) Man sieht ich fange erst an mit programmieren ;) das If werde ich mal ausprobieren, aber nachdem ich mich mit IF gar nicht auskenne, muss ich mir das erstmal beibringen wie bzw. wo ich das genau implementiere.
Zu den Datenbaken, also dem absichern von den eingegebenen Infos: Hast du da einen Link wie zu einer Erklärung. Also wie ich den Befehl gebe, genau diese Info jetzt abzuspeichern? Lese zwar die ganze Zeit Bücher aber da wird sowas nicht behandelt.... Gerne auch einen Link zu einer Übersicht über die wichtigsten Funktionen mit html und co. :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben