Frage zum Wiki-Artikel „empty“

[Rolf B]

Hallo,

ist klar, was passiert. Auch wenn ich es selbst erstmal ausprobieren musste, um drauf zu kommen. Mit Attributen hat das eher nichts zu tun, sondern mit Rekursivität.

Das Ziehungsvideo ist besonders toxisch:

<div class="mod mod-video">
  <div id="video-container-lotto" class="mod-video__player"></div>
  <div id="video-poster-lotto" class="mod-video__poster">
    <div class="copy-container">
      <button type="button" id="start-video-lotto" class="btn btn--hero play-btn">
        <span class="icon icon--arrow_right" aria-hidden="true"></span>
      </button>
    </div>
    <img src="..." alt="" class="poster cmplazyload" data-cmp-src="...">
  </div>
</div>

Wenn ich das durchlaufe, textNodes trimme, leere textNodes entferne und dann :empty Elemente rauswerfe, fliegen #video-container-lotto, und der span im Button raus. Das img hast Du ja vorher schon eliminiert.

Aber danach ist der button :empty. Der muss also auch raus. Und danach ist .copy-container :empty. Der muss also auch raus. Und danach ist #video-poster-lotto :empty. Ad nauseam.

Vielleicht hast Du erwartet, dass diese neuen :emptys automatisch in das querySelectorAll-Ergebnis hineinkommen. Aber das tun sie nicht, die Nodelist, die Du davon bekommst, ist ein statischer Schnappschuss zum Zeitpunkt des Aufrufs. Und das ist auch gut so, denn andernfalls hättest Du das Problem, dass Du Dir mit dem Löschen die Iteration zerstörst (modifiziere nie die Collection, die Du gerade iterierst).

Du musst die beiden Zeilen

  const empties = theBody.querySelectorAll(':empty');
  for (const empty of empties) empty.remove();

so oft durchführen, bis Du nichts mehr findest. Leider gibt's kein :empty-all oder so, das rekursiv arbeitet.

  while(true) {
    const empties = theBody.querySelectorAll(':empty');
    if (empties.length == 0)
      break;
    for (const empty of empties) empty.remove();
   }

Die Frage ist nur, ob Dich die empty-Nodes so stören, dass Du Dir diese Arbeit wirklich machen musst…

Rolf