プロが教える店舗＆オフィスのセキュリティ対策術

おしえて

JavaScript 要素を取得・比較して、一致した要素のタグを非表示にしたい

締切済

  • 質問者：UT-1049
  • 質問日時：
  • 回答数：1件

下記のようなhttps://www.test.co.jp/hoge/b.htmlというページ内に同ページへのリンクが入っていたら、そのリンクが記載されている要素を非表示にするJSの記述方法をご教授いただきたいです。

JavaScriptについては初心者で多少読める程度のレベルです。

・現在のページのパスを取得
・該当のリンク要素を取得
このあたりまではわかるのですが、この要素同士を比較して要素が合致したら
該当箇所を非表示させるという方法がわからなくて行き詰っている状況です。

〇実現したいこと
現ページのURLとページ内のリンク（URL）が合致したら、
そのリンクが貼ってある要素を非表示にさせる

JavaScript
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
const path = document.location.pathname.split("/").pop("");
const link = document.querySelectorAll(".hogehoge")>li>a);
↑こちらの記述ももし間違っているようでしたらご指摘いただけると助かります。

/hoge/b.html
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<blockquote>
<ul>
<li class="hogehoge"><a href="/hoge/a.html">テキストリンクA</a></li>
<li class="hogehoge"><a href="/hoge/b.html">テキストリンクB</a></li>　← このliタグを非表示にしたい
<li class="hogehoge"><a href="/hoge/c.html">テキストリンクC</a></li>
<li class="hogehoge"><a href="/hoge/d.html">テキストリンクD</a></li>
<li class="hogehoge"><a href="/hoge/e.html">テキストリンクE</a></li>
</ul>
</blockquote>
</body>
</html>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは



＞現ページのURLとページ内のリンク（URL）が合致したら、
＞そのリンクが貼ってある要素を非表示にさせる
比較方法をどうなさりたいのかがよくわかりませんけれど、ご提示のスクリプトではURLからpop()を取っているようなので、ひとまず最後の「ファイル名が一致するかどうか」で判断してよいものと解釈しました。
（実際には「/」で終わるURLやクェリ文字列があるもの等、いろいろありそうに思いますけれど・・・）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<script>
window.addEventListener('DOMContentLoaded', ev=>{
const path = document.location.pathname.split('/').pop();
document.querySelectorAll('.hogehoge>a').forEach(e=>{
if(e.href.split('/').pop()==path) e.parentNode.style.display = 'none';
});
});
</script>

</head>
<body>
<blockquote>
<ul>
<li class="hogehoge"><a href="/hoge/a.html">テキストリンクA</a></li>
<li class="hogehoge"><a href="/hoge/b.html">テキストリンクB</a></li>
<li class="hogehoge"><a href="/hoge/c.html">テキストリンクC</a></li>
<li class="hogehoge"><a href="/hoge/d.html">テキストリンクD</a></li>
<li class="hogehoge"><a href="/hoge/e.html">テキストリンクE</a></li>
</ul>
</blockquote>
</body>
</html>
    • good
    • 3
    • 件
通報する
この回答へのお礼

早々にご回答いただきありがとうございます。
思ったとおりに実装できました。

通報する
お礼日時：2021/09/14 16:59

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報