備忘録

■相対パス
特定のページでのみ特定のクラスを削除するJavaScriptコードは、まず現在のページのURLを相対パスで取得し、そのURLが条件に合致する場合にのみ、要素からクラスを削除します。

// 相対パスでURLを取得
const currentPath = window.location.pathname;

// 特定のページ (例: "/page1.html")
if (currentPath === "/page1.html") {
// クラスを削除したい要素を取得
const element = document.querySelector(".target-class"); // 例: クラス名が "target-class" の要素

// 要素が存在する場合
if (element) {
// クラスを削除
element.classList.remove("specific-class"); // 例: 削除したいクラス名が "specific-class"
}
}

解説:
1. window.location.pathname:
現在のページのURLのパス部分（例: /page1.html）を相対パスで取得します。
2. if (currentPath === “/page1.html”):
取得したパスが`”/page1.html”`と一致するかどうかをチェックします。この部分を、クラスを削除したい特定のページに合わせて変更してください。
3. document.querySelector(“.target-class”):
クラス名が “target-class” の要素を取得します。削除したい要素に合わせて変更してください。
4. element.classList.remove(“specific-class”):
取得した要素からクラス名が “specific-class” を削除します。削除したいクラス名に合わせて変更してください。

例:
もし、`”/about.html”ページでのみ、”active”クラスを持つ”menu-item”要素から”highlight”`クラスを削除したい場合は、以下のように記述します。

const currentPath = window.location.pathname;

if (currentPath === "/about.html") {
const menuItem = document.querySelector(".menu-item.active");

if (menuItem) {
menuItem.classList.remove("highlight");
}
}

ポイント:
相対パスでURLを取得することで、サイトのドメインが変わってもコードを修正する必要がありません。
`document.querySelector()`は、CSSセレクタを使って要素を取得します。より複雑な条件で要素を取得したい場合は、CSSセレクタを工夫してください。
`classList.remove()`は、複数のクラスを削除したい場合は、引数を複数指定できます。例: element.classList.remove(“class1”, “class2”);

************************************************************************************************************************************************************************************

■絶対パス
特定のページで特定のクラスを削除するには、JavaScriptのclassList.remove()メソッドを使用します。まず、削除したいクラスを持つ要素を取得し、次にclassList.remove()でクラスを削除します。特定のページかどうかを判別するには、window.location.hrefやdocument.URLでページのURLを取得し、条件分岐で処理を切り替えます。

// 削除したいクラス名
const classNameToRemove = "myClass";
// 削除対象のページURL (例)
const targetPageURL = "https://example.com/target-page";

// 現在のページのURLを取得
const currentURL = window.location.href;

// ターゲットページの場合のみ処理を実行
if (currentURL === targetPageURL) {
// クラスを削除する要素を取得 (例: IDで取得)
const element = document.getElementById("myElement");

// 要素が存在する場合のみ処理を実行
if (element) {
// クラスを削除
element.classList.remove(classNameToRemove);
}
}

解説:
1.classNameToRemove:削除したいクラス名を指定します。
2.targetPageURL:クラスの削除処理を実行するページのURLを指定します。
3.currentURL:window.location.hrefで現在のページのURLを取得します。
4.if (currentURL === targetPageURL):現在のURLがtargetPageURLと一致する場合に、ifブロック内の処理を実行します。
5.document.getElementById(“myElement”):削除したいクラスを持つ要素をIDで取得します。getElementByIdの代わりにgetElementsByClassNameやquerySelectorなど、他の要素取得方法も使用できます。
6.element.classList.remove(classNameToRemove):取得した要素のclassListから指定したclassNameToRemoveを削除します。
補足:
`classList.remove()`は、複数のクラスを一度に削除することもできます。例: element.classList.remove(“class1”, “class2”);
`classList.toggle()`は、クラスの追加と削除を切り替えます。例: element.classList.toggle(“myClass”); (クラスが存在すれば削除、存在しなければ追加)
`classList.contains()`は、要素が特定のクラスを持っているかどうかを調べます。例: if (element.classList.contains(“myClass”)) { … }
jQueryを使用している場合は、`removeClass()`メソッドを使用できます。例: $(“#myElement”).removeClass(“myClass”);
ページを特定する方法は、URLだけでなく、パス名やクエリパラメータなど、他の方法でも可能です。状況に応じて適切な方法を選択してください。
エラー処理（要素が見つからない場合など）を追加することも推奨します。

このコード例は、特定のページで特定のクラスを削除するための基本的な方法を示しています。必要に応じて、コードを修正して使用してください。