JavaScriptでheadタグ内のstyleタグを全て削除する方法

作成:2022/03/08

queryselectorall

ReactでCSSをimportすると、全てのコンポーネントに対して読み込まれてしまい、読み込むCSSの切り分けができません。

CSSモジュールを使う方法もありますが、今後使われなくなりそうな気配がありますし、僕が使っているTailwindcssをCSSモジュールで使うのはちょっと面倒です。

今回の僕が求めているケースは、エディタのプレビュー用に、プレビュー画面ではCSSを一切読み込ませないようにしたかったため、プレビュー画面のコンポーネントで、styleタグを全て削除することで強引に解決。

styleタグを削除するには、querySelectorAllを使って全てのstyleタグを取得し、それぞれの要素をremoveしてあげればOK。

    const style = document.querySelectorAll("style");
    style.forEach((s) => {
      s.remove();
    });