#107 親要素:has(.子要素:empty)を使ってみた

HTMLで子要素の中のテキストノードが空のときだけ、親の要素からfindしたdivの表示非表示を切り替えたい

何を言っているのかわからないと思うが、CSSでできる

HTML側　下記のコードで、上のolは空要素の場合、
下のolは「歯ブラシ」というテキストが入っている
送料は◯◯ですという文言は、olにテキストがあるときだけ出したい。

<div class="wrap">
  <table>
    <tr>
      <th>注文品</th>
      <td>
        <ol class="order"><li></li></ol>
      </td>
    </tr>
  </table>
  <div>※送料は、〇〇です。</div>
</div>
<hr>
<div class="wrap">
  <table>
    <th>注文品</th>
    <td>
      <ol class="order"><li>歯ブラシ</li></ol>
    </td>
  </table>
  <div>※送料は、〇〇です。</div>
</div>

JSでもできると思うが、実行タイミングがデータ取得のタイミングでうまくいかないときもあるので、確実にコントロールできるCSSで

.wrap:has(.order li:empty) > div {
  display:none;
}

実行結果