Select Element

[Andre267]

Schönen guten Morgen,

ich kenne mich leider nicht ganz so gut mit jQuery/Javascript aus wollte aber dennoch eine Kleinigkeit in meine Seite hinzufügen.
Es geht darum beim klicken auf den add Link ein li der Liste hinzu zu fügen direkt unter dem geklickten li Link.
Mit rem soll das li entfernt werden das angeklickt wurde.

Beispiel:
Ich klicke in li content1 rem an und li content1 soll weg.
Ich klicke in content2 add an und darunter wird in der ul Liste ein content2b hinzu gefügt.

<ul>
<li id="content0">
<a href="#">add</a>
<a href="#">rem</a>
</li>
<li id="content1">
<a href="#">add</a>
<a href="#">rem</a>
</li>
<li id="content2">
<a href="#">add</a>
<a href="#">rem</a>
</li>
</ul>

Kann mir jemand sagen wie das geht?
Ich weiß das ich bei jQuery mit $('#conten1').append() etwas hinzufügen kann und mit $('#conten1')..remove() etwas entfernen kann, aber ich komme mit dem selektieren nicht ganz klar.

 

[Quaese]

Hi,

du hast die Möglichkeit mit after Elemente in den DOM einzuhängen. Das automatische Selektieren der Links könnte mit eq(index) erfolgen.

Ich habe dir auf jsfiddeln ein Beispiel erstellt: http://jsfiddle.net/Quaese/LL31vppx/

Das Beispiel funktioniert und demonstriert die prinzipielle Vorgehensweise, sollte jedoch noch durch ein Handling ergänzt werden, um eindeutige IDs zu gewährleisten.

Ciao
Quaese

 

[Parantatatam]

Ich habe das Beispiel von Quaese noch etwas angepasst, da es einige Sachen enthielt, die ich nicht für so sinnvoll halte, und ich daher nicht möchte, dass jemand sie klanglos übernimmt. Dabei waren mir drei Sachen besonders wichtig:

• Event-Handling wird nicht dynamisch an neue Elemente angehängt, sondern von einem übergreifenden Event-Handler verarbeitet, der den gesamten Kontext betrachtet
• dynamisch erzeugte Elemente sollten keine just-in-time generierten (inkrementierten) IDs besitzen. Es gibt nur sehr wenige Fälle, in denen ich ähnliches für akzeptabel halte. Wenn Du das Element dynamisch erzeugt hast, dann kannst Du auch auf anderem Wege auf es zugreifen (e.g. über eine gemeinsame Klasse und den Index)
• Aktionen sollten noch abhängig vom Index des Links oder dem enthaltenen sichtbaren Text abhängen

http://jsbin.com/zebohayitu/edit?html,js,output

 

[Quaese]

@einfach nur crack:
Ich habe lange überlegt, ob ich hier überhaupt nochmal antworten soll. Aber so will ich es nicht stehen lassen und nehme kurz und einmalig Stellung dazu.

Ich habe meine Lösung nach den Anforderungen aus dem ersten Post erstellt:

• es sollten die neuen Element eine ID erhalten, so dass ich es für sinnfrei erachte, diese zu entfernen (schließlich ist nicht bekannt, wie mit den Elementen weiter verfahren werden soll)
• ich wollte möglichst wenig den bestehenden Quellcode ändern (hatte schon bedenken, der UL eine Klasse zu geben)
• zu diskutieren wäre auch noch das Handling über den live-Event, da die clone-Methode mit true aufgerufen wird -> damit werden die Events ohnehin übernommen
• ich habe mich für die Selektion über eq entschieden, da zumindest die Reihenfolge im Dokument eindeutig sein sollte, der Text jedoch könnte variabel sein (z.B. sprachabhängig - entspricht Teilen deiner dritten Forderung) und am Quellcode wollte ich wie bereits erwähnt nichts ändern

Meistens hat jeder Code Verbesserungspotential - abhängig von den Anforderungen und der Umgebung in der er eingesetzt werden soll. Ich wollte eine allgemeine Lösung anbieten. In diesem Zusammenhang von "sinnvoll" und "klangloser Übernahme" (oder sollte das "klaglos" heissen?) zur sprechen finde ich recht vermessen. Und in den meisten Punkten, die du anführst, stimme ich mit dir überein - sie enthalten aber eben auch Voraussetzungen und Anforderungen, die hier nicht erfüllt waren.

Ciao
Quaese

 

[Parantatatam]

Quaese, das war kein persönlicher Angriff und ich stelle auch nicht Deine Fähigkeiten in Frage. Mir ist auch bewusst, dass Du Dich eher an die Vorgaben gehalten hast als ich. Dennoch ist es für mich wichtig, dass Andre sieht, wie man so etwas deutlich besser lösen kann als er es sich momentan denkt.

PS: .clone(true) ist deshalb bei mir auf true gesetzt, damit die sonstigen zugeordneten Daten mit übernommen werden. Das dabei die Event-Handler mit kopiert werden (können), ist leider ein Übel, was nicht so schnell zu lösen ist.