XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Eltern-Element ausblenden (http://xhtmlforum.de/showthread.php?t=73640)

AndreasB 18.10.2018 11:10

Eltern-Element ausblenden
 
In CSS existiert kein Selektor, der ein Matchen eines Elternelementes erlaubt.


Ich möchte gerne auf einer häufig genutzten Nachrichtenseite bestimmte Artikelvorschauen, die zu Artikeln hinter einer Paywal führen, ausblenden.


Testcase:

HTML-Code:

<div><div><h2><a class="spplus" ...>...</a></h2></div></div>

Das äußere DIV soll ausgeblendet werden.


Kennt jemand für diesen Standardfall ein funktionierendes Javascript?


Ich würde mich über einen Hinweis freuen. Danke!



Wie wendet ihr Userscripts für spezifische Websites in Firefox an? Greasemonkey?

cloned 18.10.2018 11:42

woran genau bist du gescheitert?

el = document.getElementsByClassName('ssplus') zum selektieren der Elemente.

el = el.closest('div') um das div zu selektieren.

el.style.display = 'none' um es auszublenden.

edit: da wirst du noch über das array vom getElementsByClassName iterieren müssen um Schritt 2 und 3 für jedes Element auszuführen.

Bzw. mit einem foreach() von es5, bzw. for of von es6 müsste es noch simpler gehen.
https://hacks.mozilla.org/2015/04/es...e-for-of-loop/

AndreasB 18.10.2018 12:26

Danke für Deine Antwort.


Ich bat ja um ein funktionierendes komplettes Skript. Wie Du weißt, beherrsche ich Javascript nicht. Daher ist es zu kompliziert für mich, selber aus Bausteinen ein Script zu verfassen.

Wenn hier niemand mitliest, der so ein Script posten möchte: kein Problem :)
War ja nur eine Bitte, keine Erwartung.

basti1012 18.10.2018 18:21

Zitat:

Zitat von AndreasB (Beitrag 553012)
In CSS existiert kein Selektor, der ein Matchen eines Elternelementes erlaubt.


Ich möchte gerne auf einer häufig genutzten Nachrichtenseite bestimmte Artikelvorschauen, die zu Artikeln hinter einer Paywal führen, ausblenden.

wenn du ein nur ein Elternelement ausblenden willst sollte das doch reichen

Code:

<div id="blendmichaus"><span id="kind">hallo</span></div>
<script>
 ele=document.getElementById('kind');
ele=ele.parentNode;
ele.style.display='none';
 
</script>

oder verstehe ich dich falsch

AndreasB 19.10.2018 09:41

Danke für den Code, Bastian.


Das Skript wirkt leider nicht.


Ich habe es in folgendes Testcase eingefügt:


https://borumat.de/-/elternelement-ausblenden


Davon unabhängig:
Das Skript muss auch mit einem Class-Attribut funktionieren, nicht nur mit einem ID-Attribut.

cloned 19.10.2018 09:52

Das ist das selbe Skript wie ich es gepostet habe, nur dass ich es für Klassennamen und nicht für ID geschrieben habe.

"Das skript wirkt leider nicht" ist keine ausreichende Fehlerbeschreibung.

Poste doch dein Skript hier, dann können wir dir besser weiterhelfen.

edit:
Grundlagen von Javascript: Javascript wird sofort ausgeführt. Du führst dein Skript aus, wenn genau folgendes im html vorhanden ist:
Code:

<html>
<head>
<meta charset="UTF-8">
<title>Elternelement ausblenden</title>
<script>
ele=document.getElementById('kind');
ele=ele.parentNode;
ele.style.display='none';
</script>


In diesem Code-Abschnitt werden alle Elemente mit deiner ID ausgeblendet, danach wird der restliche Code geladen.

Du musst deinen Code ausführen wenn der DOM geladen ist.
Btw, Skripte kommen am Besten als letztes im body, dann würde dein Skript auch ohne on-dom-load funktionieren, aber sauberer ist es, auf einen fertigen DOM zu warten.

Wrappe deinen JS code mit folgender Funktion:
Code:

document.addEventListener("DOMContentLoaded", function() {
  // Code HIER wird erst ausgeführt wenn DOM geladen ist.
});


AndreasB 19.10.2018 10:06

Danke.


Mit Deinem "Wrapper" wird das Elternelement H1 ausgeblendet, wenn ich bei "GetElementByID" bleibe.
Nicht jedoch die Groß- und Urgroßeltern (DIV).
Das Vorfahrenelement BODY soll natürlich nicht ausgeblendet werden.



Du schreibst "Poste doch Dein Skript":

Ich habe ja sogar mehr getan und ein Testcase angelegt.


Am einfachsten kann man die Sache in dem Code Pen testen und nachvollziehen.

Ich habe das Testcase auf borumat.de wieder entfernt.

Du schreibst weiter oben von "Iterieren". Das ist mir noch nicht klar. Jedenfalls funktioniert "GetElementsByClassName" so wie es zur Zeit in CodePen steht nicht.

cloned 19.10.2018 10:11

Du verwendest .parent, damit gehst du genau ein Element nach oben in deinem DOM-Tree, das ist nun mal das H1. du kannst natürlich .parent öfter aufrufen, bis du dort bist, wo du hinwillst, zb ele.parentNode.parentNode.parentNode ....

Du kannst auch, wie ich schon geschrieben habe, .closest('div') verwenden, um zum nähesten div zu gehen (also immer ein Element nach oben bis du bei einem div bist (das sollte auch mit Klassennamen funktionieren)

edit: ja, dein skript habe ich danach dann gefunden, das habe ich zuerst übersehen. Sorry dafür.

AndreasB 19.10.2018 10:32

Ich habe jetzt



ele=ele.closest('div');


in den Code Pen eingefügt.
So klappt es nicht.


Am einfachsten wäre es vielleicht, wenn Du den Code Pen forkst und es in richtiger Weise einträgst. Denn mein Code enthält ja offenbar noch Fehler.

cloned 19.10.2018 10:38

Zitat:

Zitat von AndreasB (Beitrag 553042)
Am einfachsten wäre es vielleicht, wenn Du den Code Pen forkst und es in richtiger Weise einträgst. Denn mein Code enthält ja offenbar noch Fehler.

Welchen Code Pen? dein beispielcode wurde gelöscht wenn ich das richtig sehe.


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:41 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019