[JavaScript][CSS] Ukrywanie pseudoelementu za pomocą JS Opcje

[stellatus]

Kod

<div>
  <p class="g1-meta entry-meta entry-byline entry-byline-with-avatar">
    <span class="entry-author">
      <span class="entry-meta-label">von</span>
      <a href="#" title="Posts by Roman" rel="author">
        <img
          alt=""
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS6001cC2ejbwzQndTn-VX7NCmhWbom3WH5TDdzhFHeotIhLKZV"
          class="avatar avatar-30 photo"
          width="30"
          height="30"
        />
        <strong>Roman</strong>
      </a>
    </span>

    <time
      class="entry-date"
      datetime="2020-02-19T19:14:24"
      title="Feber 19, 2020, 7:14 pm"
      >vor 3 Tagen</time
    >
  </p>
</div>
<div>
  <p class="g1-meta entry-meta entry-byline entry-byline-with-avatar">
    <span class="entry-author">
      <span class="entry-meta-label">von</span>
      <a href="#" title="Posts by Hidden" rel="author">
        <img
          alt=""
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS6001cC2ejbwzQndTn-VX7NCmhWbom3WH5TDdzhFHeotIhLKZV"
          class="avatar avatar-30 photo"
          width="30"
          height="30"
        />
        <strong>Hidden</strong>
      </a>
    </span>

    <time
      class="entry-date"
      datetime="2020-02-19T19:14:24"
      title="Feber 19, 2020, 7:14 pm"
      >vor 3 Tagen</time
    >
  </p>
</div>
<div>
  <p class="g1-meta entry-meta entry-byline entry-byline-with-avatar">
    <span class="entry-author">
      <span class="entry-meta-label">von</span>
      <a href="#" title="Posts by Krycha" rel="author">
        <img
          alt=""
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS6001cC2ejbwzQndTn-VX7NCmhWbom3WH5TDdzhFHeotIhLKZV"
          class="avatar avatar-30 photo"
          width="30"
          height="30"
        />
        <strong>Krycha</strong>
      </a>
    </span>

    <time
      class="entry-date"
      datetime="2020-02-19T19:14:24"
      title="Feber 19, 2020, 7:14 pm"
      >vor 3 Tagen</time
    >
  </p>
</div>

Kod

.entry-byline .entry-date::before {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 8px;
    vertical-align: middle;
    border-radius: 50%;
    content: "";
    background: currentColor;
}

Kod

function hideSelectedTimeBefore() {
    var x = document.querySelectorAll('a[title="Posts by Hidden"]');
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].parentNode.parentNode.querySelector('time.entry-date').style.display = "none";
    }
}
hideSelectedTimeBefore()

https://codepen.io/rudolph-reti/pen/XWbNVGM

Przy autorze "Hidden", chciałbym ukryć tylko kropkę (pojawiającą się za nazwą autora), która jest pseudoelementem. Wiem jak ukryć element <time>, w której siedzi pseudoelement "::before", co pokazałem w załączonym kodzie, ale nie wiem jak usunąć sam pseudoelement.

[trueblue]

Po prostu dodaj klasę do elementu <time>.
I wtedy:

Kod

time.hidden-before::before{
display: none;
}

Zamiast tej dziwnej konstrukcji parentNode.parentNode użyj po prostu closest.

[stellatus]

Dzięki. Na początek chciałem tylko zlokalizować <time> za pomocą "closet" i już na tym etapie coś robię źle, bo wyskakuje błąd: http://srv19859.microhost.com.pl/2020-02-22_11h52_09.jpg

[trueblue]

closest ma zastąpić kombinację parentNode.parentNode
Przeczytaj w manual jakie elementy znajduje closest.

[stellatus]

Tutaj są różne przykłady:

Kod

var el = document.getElementById('div-03');

var r1 = el.closest("#div-02");  
// returns the element with the id=div-02

var r2 = el.closest("div div");  
// returns the closest ancestor which is a div in div, here it is the div-03 itself

var r3 = el.closest("article > div");  
// returns the closest ancestor which is a div and has a parent article, here it is the div-01

var r4 = el.closest(":not(div)");
// returns the closest ancestor which is not a div, here it is the outmost article

Więc <time> powinno zostać też odnalezione.

Skoro "closest" miałoby zastąpić "parentNode.parentNode" i do <time> miałaby być dodana klasa "hidden-before" z ::before to rozumiem, że powinienem zadeklarować tę klasę w CSS i w JS napisać:

Kod

x[i].closest("time").classList.add("hidden-before::before");

(https://codepen.io/rudolph-reti/pen/RwPoQqw)

ale to oczywiście nie działa. Mógłbyś mi powiedzieć dlaczego?

Ten post edytował stellatus 22.02.2020, 12:21:04

[trueblue]

Nieprawda.
closest znajduje poprzednika (lub ten sam element) na podstawie selektora.
<time> nie jest poprzednikiem elementu <a>.

[HTML] pobierz, plaintext 
x[i].closest("p.g1-meta").querySelector("time")
[HTML] pobierz, plaintext 

"hidden-before::before" to nie jest poprawna klasa.

[stellatus]

Dzięki.

"hidden-before::before" to nie jest poprawna klasa.

Jeżeli nie tak:

Kod

x[i].closest("p.g1-meta").querySelector("time").classList.add("hidden-before::before");

to jak dodać klasę z ::before do tego <time>?
https://codepen.io/rudolph-reti/pen/RwPoQqw





Ten post edytował stellatus 22.02.2020, 13:10:33

[trueblue]

Wspominałem, że to nie jest poprawna klasa.
Dlaczego to nazwy klasy dodajesz nazwę elementu?

[stellatus]

Sorry, nie rozumiałem jak działają te pseudoelementy. Prejrzałem teraz to: https://www.w3schools.com/CSS/tryit.asp?fil...e=trycss_before Z tego wynika, że muszę do <time> dodać po prostu klasę: "hidden-before", do której już został przypisany ::before. Zrobiłem tak:

Kod

x[i].closest("p.g1-meta").querySelector("time").classList.add("hidden-before");

Kod

.hidden-before::before{
display: none !important;
}

https://codepen.io/rudolph-reti/pen/RwPoQqw

I działa. Dzięki bardzo!