Element per Javascript verbergen

nipalke · 9 Juni 2014

In folgendem HTML-Schnipsel soll der Inhalt des p-Elements beim Klick auf das "X" verschwinden.

[src=html5]<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test</title>
<script type="text/javascript">
function remove(id){
document.getElementById(id).style.display = "none";
}
</script>
</head>
<body>
<p id="99"><a onclick="remove(99)">x</a>Der Inhalt der verschwinden soll.</p>
</body>
</html> [/src]

das klappt auch ganz gut aber nur im IE und Opera. Chrome und Firefox haben (seit neustem?) irgendwas dagegen und ich steh hier voll auf dem Schlauch.

LemonDrops · 9 Juni 2014

Vielleicht solltest du dein Javascript nicht wie vor 15 Jahren schreiben.

accC · 9 Juni 2014

Öffne die Seite mit dem entsprechenden Browser und nutze die Webentwickler-Tools / JavaScript Konsole. Dort wird dir angezeigt, wo ein Problem auftritt. Elegant ist deine Lösung allerdings definitiv nicht.

remove gibt es übrigens bereits und das nimmt kein Argument und entfernt das aufrufende Objekt. Indem Fall eben dein <a>.
Daher solltest du explizit sagen, dass du den parentNode entfernen möchtest:

[src=html5]
<!doctype html>
<html>
<head>
</head>

<body>
<div><a onClick="this.parentNode.remove();">X</a>Dumme Werbung</div>
</body>

</html>
[/src]

Beachte allerdings, dass du damit im Zweifelsfall auch den Body entfernen kannst:

[src=html5]<!doctype html>
<html>
<head>
</head>

<body>
<a onClick"this.parentNode.remove();">X</a><div>hier habe ich einen Fehler gemacht</div>
</body>

</html>[/src]

Im Zweifelsfall solltest du eine Funktion schreiben, die prüft, wie viel du entfernst:

[src=html5]<!doctype html>
<html>
<head><script type="text/javascript">
var removeParent = function (node) {
if(node.parentNode != null && node.parentNode != document.body) {
node.parentNode.remove();
} else {
// Warnen?
// alert('Das will ich nicht entfernen.');
node.remove();
}
}
</script>
</head>
<body>
<a onClick"removeParent()">X</a><div>hier habe ich einen Fehler gemacht, aber das macht nichts..</div>
<div>das ist richtig und wird auch korrekt entfernt..<a onClick="removeParent()">x</a></div>
</body>
</html>
[/src]

Damit sparst du dir übrigens auch die ganzen ids.

SP4C3 · 10 Juni 2014

Alternativ per jQuery
[src=javascript]jQuery(id).hide()[/src]

dexter · 10 Juni 2014

accC schrieb:
[src=html5]
onClick
[/src]

Hab ich was verpasst?

accC · 10 Juni 2014

dexter schrieb:
Hab ich was verpasst?

Habe ich etwas verpasst und onClick wurde aus der HTML Spezifikation geschmissen?

@SP4C3: Warum man für einen Einzeiler eine ganze Bibliothek einbinden sollte, verstehe ich auch nicht. Zumal der TS wohl erst mal JavaScript lernen will/sollte und ihm ein Framework, welches ihm die Arbeit abnimmt nicht sonderlich geeignet ist, um die Sprache zu lernen. Da kannst du ihm auch sagen er soll mit Word/ einem beliebigen WYSIWYG-Editor HTML lernen, weil's halt schöner aussieht. Wenn er JS kann, kann er immer noch ein Framework einsetzen. Zumal das dem TS wohl sicherlich nicht hilft zu verstehen, warum seine Lösung nicht funktioniert hat.

keksautomat · 10 Juni 2014

jQuery zu lernen steht mMn vor purem JS. Für solch kleine Dinge, aufjedenfall. Will er irgendwann was mit Prototypes machen und eigene Callbacks und bla bla bla, da muss er sich eh wieder einlesen. Aber fürs "verstecken" irgendwelcher Sachen würde ich keinem Neuling sagen: machs mit purem JS.
btw, nein, onClick wurde nicht rausgehauen. Ist aber seit 10 Jahren wirklich nicht mehr best-practice.

accC · 10 Juni 2014

btw, nein, onClick wurde nicht rausgehauen. Ist aber seit 10 Jahren wirklich nicht mehr best-practice.

Gut. Wie gesagt, es ist nicht die eleganteste Lösung, sicherlich aber die, die der TS angestrebt hat, weil er sie versteht und eine die möglich ist. Warum sollte er jetzt mit etwas arbeiten, das er überhaupt nicht versteht? Damit er am besten noch ein jQuery-Logo auf seine Seite pappt und sich damit rühmen kann ein ganz besonders tolles Framework zu verwenden, aber möglichst keine Ahnung (mehr) davon hat, was eigentlich wirklich passiert? Zum Programmieren gehört es nicht nur einen funktionierenden Code produzieren zu können, sondern auch zu verstehen, warum der Code, den man produziert hat, funktioniert. Wenn es auch nicht state of the art ist, versteht der TS, was bei seinem onClick passiert, was bei einem jQuery(id).hide() passiert, wird er sicherlich nicht mehr verstehen..

LemonDrops · 10 Juni 2014

Tatsächlich mach es sogar Sinn, mit einem Framework zu beginnen. Da Frameworks einem eine Struktur vorgeben, die verhindert, dass man so einen Unsinn, wie er hier gezeigt wird, benutzt. Wer Empfiehlt das Problem so zu lösen, wie es hier gelöst ist, versteht offensichtlich nichts von Java Script und reitet den TS nur viel tiefer in das Problem. Es ist auch ziemlich arrogant zu behaupten, man selbst würde das Problem verstehen, aber der TS ist zu dumm, es zu verstehen und darum zeige ich ihm einfach falsche Lösungen, die der Unterling versteht.

Eine "richtige" Lösung sähe so aus:

Live Beispiel: http://jsfiddle.net/5V3Bh/

[src=html4strict]
<body>
<p id="99"> <a id="removeContent">x</a>Der Inhalt der verschwinden soll.</p>
</body>
[/src]
[src=javascript]
(function (doc) {
// Wir benutzen einen closure,
// damit wir nicht versehentlich wichtige funktionen/objekte überschreiben.

// Dafür benutzen wir eine Funktion, die sich selbst ausführt,
// in diese Funktion übergeben wir das "document" Objekt,
// um es als lokale variable nutzen zu können

// wir referenzieren das Element, das, beim Klick, den Content entfernen soll:
var contentRemoveTrigger = doc.getElementById('removeContent'),

// wir schreiben die Funktion, die den Content entfernt
removeContent = function () {
var elementToRemove = doc.getElementById('99');
elementToRemove.parentNode.removeChild(elementToRemove);
};

// wir verbinden die Funktion die den Content entfernt
// mit dem klicken des entsprechenden Elements
contentRemoveTrigger.addEventListener('click', removeContent, false);

}(document));
[/src]

Ich habe einfach erklärt was ich mache und wenn der TS eine Frage dazu hat, kann er sie stellen. So lösen wir sein Problem und er lernt etwas dabei.

dexter · 10 Juni 2014

accC schrieb:
Habe ich etwas verpasst und onClick wurde aus der HTML Spezifikation geschmissen?

Ok, ich wusste bis eben nicht, dass in HTML5 die unsägliche Egalschreibung wieder eingeführt wurde. Ziehe daher die Frage zurück.

LemonDrops · 11 Juni 2014

@dexter: die wurde in HTML doch nie abgeschafft.

Kugelfisch · 11 Juni 2014

Ja, alle SGML-basierten HTML-Versionen wie auch HTML5 sind case-insensitive. Lediglich XHTML war durch den XML-Unterbau case-sensitive, was meines Erachtens übrigens ebenso sinnvoll war wie die übrigen strengeren Syntax-Regeln ...

LemonDrops, die von dir vorgeschlagene Lösung kann sinnvoll sein, wenn man einen generellen Coding-Standard einhalten möchte (wobei auch dann die Übergabe des document-Objekts m.E. unnötig ist und die Lesbarkeit beeinträchtigt). In diesem Fall lässt sich derselbe Effekt auch wesentlich einfacher und ohne zusätzlichen äusseren Closure erreichen (ohne den globalen Scope zu belasten):
[src=javascript]document.getElementById('removeContent').addEventListener('click', function(ev) {
var elementToRemove = doc.getElementById('99');
elementToRemove.parentNode.removeChild(elementToRemove);
}, false);[/src]

Wenn das Element andere Elemente überdeckt und dadurch unlesbar macht, wäre zusätzlich noch zu prüfen, wie sich ein Fallback realisieren lässt, falls JavaScript deaktiviert ist. Eine Möglichkeit wäre etwa, das Popup-Element per CSS zu verstecken und erst per JavaScript anzuzeigen (dann würde es bei deaktivierter JS-Unterstützung niemals angezeigt), oder es in den normalen Dokumentfluss einzubinden, so dass es in diesem Fall keine anderen Elemente überdeckt. Ausserdem würde sich aus semantischer anbieten, den aussagelosen `schliessen`-Link erst per JavaScript zu erzeugen:
[src=javascript](function() {
var removeables = document.getElementsByClassName('removeable');
for(var i=0;i<removeables.length;i++) {
var removeTrigger = document.createElement('a');
removeTrigger.className = 'removeContent';
removeTrigger.appendChild(document.createTextNode('x'));
removeTrigger.addEventListener('click', function(e) {
var elementToRemove = this.parentNode;
elementToRemove.parentNode.removeChild(elementToRemove);
}, false);
removeables.insertBefore(removeTrigger,removeables.firstChild);
}
}());[/src]
[src=html5]<body>
<p class="removeable">Der Inhalt der verschwinden soll.</p>
<p>Der Inhalt der nicht verschwinden soll.</p>
<p class="removeable">Anderer Inhalt der verschwinden soll.</p>
</body>[/src]

accC · 12 Juni 2014

LemonDrops schrieb:
Tatsächlich mach es sogar Sinn, mit einem Framework zu beginnen. Da Frameworks einem eine Struktur vorgeben, die verhindert, dass man so einen Unsinn, wie er hier gezeigt wird, benutzt.

In wie fern soll der Einsatz eines Frameworks einem bei dem Erlernen einer Sprache weiterhelfen? Sauber programmieren lernt man dadurch sicherlich nicht, man kann weiterhin schmutzigen Code schreiben, auch wenn man jQuery verwendet. Einen guten Programmierstil lernt man sicherlich auch nicht durch das Verwenden von Frameworks, die Begründung ist im Wesentlichen die gleiche. Das Framework schränkt einen bezüglich schlechter Programmierung nicht ein. Man sollte zuerst lernen eine Sprache sauber zu programmieren, bevor man sich dann von Frameworks unterstützen lässt.

Wer Empfiehlt das Problem so zu lösen, wie es hier gelöst ist, versteht offensichtlich nichts von Java Script und reitet den TS nur viel tiefer in das Problem.

Eine Korrektur fehlerhaften Codes anzugeben heißt nicht eine Empfehlung für diese Korrektur auszusprechen. Hättest du meinen Beitrag vollständig gelesen, wäre dir sicherlich auch aufgefallen, dass ich das angesprochen habe:

accC schrieb:
Elegant ist deine Lösung allerdings definitiv nicht.

Es ist auch ziemlich arrogant zu behaupten, man selbst würde das Problem verstehen, aber der TS ist zu dumm, es zu verstehen und darum zeige ich ihm einfach falsche Lösungen, die der Unterling versteht.

Das Problem dürfte wohl in der falschen Verwendung von remove() gelegen haben, ohne mir das jetzt noch mal anzuschauen. Dass JavaScript ernste konzeptionelle Probleme mit sich bringt, kann man zwar nicht unter den Tisch fallen lassen, spielt an dieser Stelle allerdings erst mal nur eine nebensächliche Rolle. Der Vollständigkeit hättest du also wenn schon das von Kugelfisch angesprochene Problem erwähnen sollen, dann aber bitte auch gleich noch sämtliche Inkonsistenzen von JavaScript, die gegen eine Verwendung davon sprechen. Ich habe mich lediglich darauf beschränkt, den Fehler "funktioniert nicht" zu korrigieren. Den Anspruch seinen Code zu einem Kunstwerk zu machen, habe ich gar nicht an mich selbst gestellt.

Ich sagte auch nicht, dass der TS dumm ist, dass er wohl aber wenig(er) Erfahrung mit JavaScript hat, lässt sich wohl kaum abstreiten. Dass du daraus folgerst, er sei dumm und ein "Unterling", ist deine Interpretation - du bist der Erste und Einzige, der das sagt! - und zeigt wie primitiv dein Urteilsvermögen an dieser Stelle ist. Ich finde das auch eine Frechheit.

LemonDrops · 12 Juni 2014

@accC: jQuery ist auch kein Framework. Ein Framework schränkt dich zwangsläufig darin ein wie du programmierst, da es dir Konzepte und Workflows vorgibt und gerade davon profitieren Anfänger besonders gut.

Mir ist es ehrlich gesagt warum du schlechten/falschen Code postest. Es ist ein Problem, weil er sich genauso verbreitet. Falls ich zu Aggressiv in meinen Worten war tut mir das leid und ich werde sehen, dass ich das in Zukunft nicht mehr mache

accC · 12 Juni 2014

Der Code ist nicht falsch in seiner Funktion, im Gegenteil, er tut genau, was er soll. Dass er nicht optimal ist, stimmt natürlich ebenfalls. Die Frage des TS war allerdings nicht nach perfektem Code, sondern (implizit) danach, warum das nicht funktioniert, was er geschrieben hatte.

evillive · 12 Juni 2014

@LemonDrops:

jQuery ist auch kein Framework.

wieso ist es kein Framework?

LemonDrops · 12 Juni 2014

@evillive: Weil jQuery eine Library ist.

SP4C3 · 13 Juni 2014

Schön, dass keiner merkt, dass es darum geht ein Element zu verstecken(auszublenden), nicht es aus dem Dokument zu entfernen.

Das Problem hier ist, dass die Funktion remove bereits für jeden node existiert und der Eventhandler onclick im Scope des aktuellen Nodes arbeitet.
Da Funktionssignaturen in JS nur aus dem Namen bestehen und diese stets beliebig viele Argumente annehmen, wird die Funktion remove des Anchor Knoten nodes aufgerufen, nicht die im Window definierte Funktion remove.

Also am kürzesten ist es

Code:

onclick="window.remove(99)"

zu schreiben

Die ganze Metadiskussion... Was soll das? Metadiskussionen über Library-x ja oder nein, JS ist broken oder nicht etc. pp.

dexter · 13 Juni 2014

SP4C3 schrieb:
Die ganze Metadiskussion... Was soll das?

Kannste Dir bei der näxten JS-Frage klemmen. Schön, dass Du es selbst gemerkt hast.

SP4C3 · 13 Juni 2014

dexter schrieb:
Kannste Dir bei der näxten JS-Frage klemmen. Schön, dass Du es selbst gemerkt hast.

Die Aussage versteh ich nciht

Element per Javascript verbergen

NGBler

Neu angemeldet

gesperrt

Neu angemeldet

Cloogshicer®

gesperrt

Neu angemeldet

gesperrt

Neu angemeldet

Cloogshicer®

Neu angemeldet

Nerd

gesperrt

Neu angemeldet

gesperrt

EXIL

Neu angemeldet

Neu angemeldet

Cloogshicer®

Neu angemeldet