[FRAGE] wie CSS ::after: Symbol nach Text anfügen ohne zusätzliche Child-Elemente

[j-l-n]

Ich möchte folgendes erreichen (im Screenshot als rote X dargestellt):


Auf dieses X soll ein onclick-Event registriert werden, das beim Klick eine Funktion aufruft, die die betreffende Notiz löscht.
Folgendermaßen könnte ich dies leicht realisieren:

<div>Irgendein Eintrag
  <div>X</div>
</div>

Dies möchte ich aber unbedingt vermeiden, da ich dadurch zusätzliche Child-Nodes haben würde. Diese würden mein derzeitiges Konzept zum Speichern der Notizen stören.

Perfekt geeignet wäre das Hinzufügen eines after-Symbols mit CSS - nur kann ich mit JS nicht darauf zugreifen, da es sich ja um Pseudoelemente handelt.


Ich wäre sehr dankbar für eine Idee, wie ich das anders lösen könnte. Oder würde es layouttechnisch funktionieren, seperate <div> zu erzeugen und diese exakt neben dem jeweiligen „Notiz-<div>” zu positionieren?

 

[dbarthel]

Oder würde es layouttechnisch funktionieren, seperate <div> zu erzeugen und diese exakt neben dem jeweiligen „Notiz-<div>” zu positionieren?

Ich denke schon, dass das möglich ist, allerdings habe ich jetzt so auf die Schnelle, keinen funktionierenden Code dazu, den ich dir zeigen könnte.

Dies möchte ich aber unbedingt vermeiden, da ich dadurch zusätzliche Child-Nodes haben würde. Diese würden mein derzeitiges Konzept zum Speichern der Notizen stören.

Kannst du dein derzeitiges Konzept zum Speichern der Notizen zeigen?

- - - Aktualisiert - - -

Villeicht hilft dir ja ein Blick in den Code von dem hier:

[url]https://60296b08978098d7acd078c329f5e9885f2b2191.googledrive.com/host/0B2vKerMpRnudUGJlWC1yN3VUZWs/plugin.html[/URL]

 

[j-l-n]

Kannst du dein derzeitiges Konzept zum Speichern der Notizen zeigen?

Nein, leider nicht. Ich bin da noch beim Arbeiten - sieht (zu) wirr aus.

Villeicht hilft dir ja ein Blick in den Code von dem hier:

Ich hab ehrlich gesagt keine Lust, mich da extra einzuarbeiten; ohnehin basiert es auf einem anderen Konzept (mehrere Notizzettel statt einem mit mehreren Notizen) und ist zu umfangreich. Nichtsdestotrotz danke für den Tipp!

 

[mikdoe]

Kannst du denn dem betreffenden div beim Erzeugen des Eintrags nicht einen onclick verpassen? Ich glaub, ich peil das Problem gerade nicht.

 

[j-l-n]

Kannst du denn dem betreffenden div beim Erzeugen des Eintrags nicht einen onclick verpassen?

Dazu bräuchte ich aber einen child-<div> mit dem Löschsymbol, was ich vermeiden möchte. Wenn, dann müsste ich einen seperaten <div> erzeugen und diesen genau hinter dem anderen <div> mit dem Eintrag positionieren. Und hier weiß ich nicht, wie ich das hinbekomme.

 

[dbarthel]

Wenn, dann müsste ich einen seperaten <div> erzeugen und diesen genau hinter dem anderen <div> mit dem Eintrag positionieren. Und hier weiß ich nicht, wie ich das hinbekomme.

kannst du nicht die Cursor-Postion auslesen und diese Werte zur Positionierung der seperaten <div> verwenden?

 

[j-l-n]

kannst du nicht die Cursor-Postion auslesen und diese Werte zur Positionierung der seperaten <div> verwenden?

Ist mir zu unsicher; vor allem aber funktioniert es auf Geräten ohne Maus (Smartphones, Tablets, ...) dann sehr schlecht bis gar nicht.

 

[dbarthel]

Ohne das Script zu kennen, ist es für mich jetzt etwas schwierig, sich das ganze vorzustellen.


Wäre es nicht möglich, zusammen mit der gespeicherten Notiz, die ja wahrscheinlich irgendeine Art von ID hat, in der selben Zeile, das Lösch-Symbol via HTM-Syntax einbaust und mit einem "onclick" versiehst, der dann die Lösch-Funktion aufruft und ihr diese ID übergibt.

 

[j-l-n]

in der selben Zeile, das Lösch-Symbol via HTM-Syntax einbaust und mit einem "onclick" versiehst

Ein einzelner Buchstabe/Symbol kann nicht mit einem onclick versehen werden - nur ganze Elemente können ein onclick-Event haben.

 

[dbarthel]

Ein einzelner Buchstabe/Symbol kann nicht mit einem onclick versehen werden - nur ganze Elemente können ein onclick-Event haben.

wenn das Symbol eine Grafik und kein Zeichen ist, schon!

<script type="text/javascript">
function test()
 {
alert('hallo welt');
 }
</script>



</head>

<body>
    
<img src="test.png" width="200" height="20" onclick="test()"/>	 

</body>

 

[j-l-n]

wenn das Symbol eine Grafik und kein Zeichen ist, schon!

Ja, das natürlich...

 

[mikdoe]

Dazu bräuchte ich aber einen child-<div> mit dem Löschsymbol

Aber in Beitrag #1 hat das X doch ein eigenes div. Wieso nimmst du das nicht? Ich peil das Problem immer noch nicht, sorry, ich mach das nicht extra aber irgendwie sehe ich gerade den Wald vor lauter Bäumen nicht.

 

[tsseh]

Dies möchte ich aber unbedingt vermeiden

10 zeichen

 

[mikdoe]

hesst, kannst du das Problem mal mit deinen Worten schildern?

 

[tsseh]

er will etwas wie ::after (wobei ich das für grenzwertig halte), auf keinen fall ein child, bleibt nur ein sibling
wenn man das ursprüngliche div jetzt absolut positioniert, wie kann man den sibling relativ zu diesem positionieren?
über ein parent, welches absolut positioniert wird, und die beiden childs relativ zu diesem würde es gehen, nur wird das nicht die gesuchte lösung sein

 

[dbarthel]

Armer Julian.

 

[j-l-n]

er will etwas wie ::after (wobei ich das für grenzwertig halte), auf keinen fall ein child, bleibt nur ein sibling

Genau, richtig.

Aber in Beitrag #1 hat das X doch ein eigenes div.

Ja, ich hätte nochmal deutlich sagen sollen, dass das mit GIMP eingefügt ist. So soll es also aussehen.

 

[j-l-n]

Jetzt wo du wieder da bist: hast vielleicht du eine Idee, Korbininan?

 

[kkapsner]

Ohne das ganze System zu kennen, ist das schwierig, einen guten Ratschlag zu geben. Aber eventuell funktioniert sowas:

<!DOCTYPE html>

<html>
<head>
<title>Fenstertitel</title>
<style type="text/css">
#notes {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100px;
}
.noteContainer {
	position: relative;
	padding-right: 20px;
	overflow: hidden;
}
.noteContainer .delete {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	color: red;
	align: center;
	cursor: pointer;
}
</style>
</head>
<body>
<ul id="notes">
	<li class="noteContainer"><div class="note">ajsldkajds dalksjd aslkdjadkf </div><div class="delete">X</div></li>
	<li class="noteContainer"><div class="note">ajsldkajds dalksjd aslkdjadkf </div><div class="delete">X</div></li>
</ul>
<script type="text/javascript" src="//kkjs.kkapsner.de/modules/kkjs.load.js"></script>
<script type="text/javascript">
kkjs.event.add(kkjs.css.$(".noteContainer .delete"), "click", function(){
	kkjs.node.remove(this.parentNode);
});
</script>
</body>
</html>

- also um die Notiz ein Element machen, dass dann auch noch das X enthält und die Positionierung durchführt.

 

[j-l-n]

Hm, ich glaube, ich überarbeite doch mal noch mein Konzept. Wobei die Lösung eigentlich gar nicht so schlecht ist, dann könnte ich die CSS-Class auslesen und dann die „remove„-<div>s ausschließen...