<p>タグ内の一部文字列だけ非表示化したい

Question

<p>
　<span class="price">￥1,080</span>
　(税込)
</p>

上記のようなHTMLにおいて、
"(税込)" のみをCSSで非表示化する方法はありますでしょうか。

またはjsでの方法でも大丈夫です。

Comments

[yambejp]

非表示とは削除ではないのですよね？
透明ともちがいますか？

Answer 1

visibility プロパティで制御するとできそうです。

p {
  visibility: hidden;
}

.price {
  visibility: visible;
}

Comments

[zagin]

ありがとうございます！
試してみます！

Answer 2

「(税込)」の部分もspanなどで囲めばできそうですが、HTMLをいじるのはNGですか？
JSからHTMLの構造を変えてもよいのでしょうか？

<style>
p :not(.price){
display:none;
}
</style>
<p>
　<span class="price">￥1,080</span>
　<span>(税込)</span>
</p>

※priceクラスのついてない部分を非表示するjs

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  [...document.querySelector('p').childNodes].filter(x=>x.nodeType==3).forEach(x=>{
    const s=document.createElement('span');
    s.setAttribute('hidden','');
    x.parentNode.insertBefore(s,x);
    s.appendChild(x);
  });
});
</script>
<p>
　<span class="price">￥1,080</span>
　(税込)
</p>

Comments

[zagin]

ご回答ありがとうございます。
言葉足らずでしたが、HTML構造はそのまま、理想はCSSで対応できればと考えておりました。

もし現状の構造上CSSだけでは解決できなければ、js含め検討したいと考えております。

[yambejp]

質問への補足希望にも書きましたが非表示という定義によります
たとえば背景色と文字色を同じにすればとりあえず見えなくなります

[zagin]

ありがとうございました！
こちらの方法も試してみます。