javascript - 隐藏所选 <span> 的第一个 child 、第二个 child 标签

Question

抱歉，标题可能有点困惑。

我有多个 <div> ' 自动生成。

<div class="item">
  <div class="item-inner  selected">
    <div class="checkbox-row">
      <span class="fakelabel">
        <input id="id_300622" type="checkbox" name="id_300622" checked="checked">
        <span>Marketing</span>
        <span>Email</span> <span> | </span>
        <span>Blog | Subscription</span>
      </span>
    </div>
    <p>Receive timely updates with the latest blog posts.</p>
  </div>
</div>

<div class="item">
  <div class="item-inner  selected">
    <div class="checkbox-row">
      <span class="fakelabel">
        <input id="id_4849126" type="checkbox" name="id_4849126" checked="checked">
        <span>Careers Subscription</span>
      </span>
    </div>
    <p>Receive timely updates with the latest blog posts.</p>
  </div>
</div>

我上面的代码片段，我想要前三个 span成为display:none; , 所以它只显示 <span>Blog | Subscription</span>标签。

我可以执行以下操作来隐藏标签:

.fakelabel span:nth-child(2) {
    display: none;
}

但是，执行上述操作也会隐藏第二个 div 中的“Careers Subscription”文本。

理想情况下，我想要最后一个 <span>在每个 div 中始终可见，并隐藏任何其他 div。但我不确定如何处理这个问题？

注意:我无法更改 HTML，因为 HTML 代码是通过 HubSpot 自动生成的(很痛苦!)。这可以通过 JavaScript/CSS 实现吗？

Answer 1

Ideally, I want the last <span> to always be visible in each div, and hide any other ones. But I'm not sure how to approach this?

使用 :not语法和 last-of-type选择器。

.fakelabel span:not(:last-of-type) {
  display: none;
}

<div class="item">
  <div class="item-inner  selected">
    <div class="checkbox-row">
      <span class="fakelabel">
        <input id="id_300622" type="checkbox" name="id_300622" checked="checked">
        <span>Marketing</span>
      <span>Email</span> <span> | </span>
      <span>Blog | Subscription</span>
      </span>
    </div>
    <p>Receive timely updates with the latest blog posts.</p>
  </div>
</div>

<div class="item">
  <div class="item-inner  selected">
    <div class="checkbox-row">
      <span class="fakelabel">
        <input id="id_4849126" type="checkbox" name="id_4849126" checked="checked">
        <span>Careers Subscription</span>
      </span>
    </div>
    <p>Receive timely updates with the latest blog posts.</p>
  </div>
</div>