hrefの中身が""かnullのものだけaタグの下線を無効にしたい

例えば、下記のようなHTMLコードがある時に、

index.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Links</title>
7</head>
8<body>
9    <h2>PageList</h2>
10        <p><a href="/hoge.html" target="_blank">hoge</a></p>
11        <p><a href="/guhe.html" target="_blank">guhe</a></p>
12        <p><a href="" target="_blank">None1</a></p>
13        <p><a href="/agu.html" target="_blank">agu</a></p>
14        <p><a href="/guo.html" target="_blank">guo</a></p>
15        <p><a href="" target="_blank">None2</a></p>
16
17<script>
18/*
19    document.querySelectorAll('p>a'){
20        if( ? =""){
21            this.style.textDecoration = 'none';
22        }
23    }
24*/
25</script>
26</body>
27</html>

内部のaタグのhrefの中に何も入っていない（""もしくはnull）p要素をすべて選択して（上記の場合はNone1とNone2）、それらのaタグを無効にする（中のテキストだけが表示されるようにする）為には、JavaScriptの記述はどのようにすればよいでしょうか。

スクリプトタグ内のように、すべてのｐタグの中のaタグを選択する迄は分かるのですが（或いは違うかもしれません...）、その中身のif文をどう記述すればよいのか、.styleの前に繋げるのはthisなのか「document.querySelectorAll('p>a')」を変数化したものなのか、分かり兼ねています。

まだ構想段階ですが、この先PHPとMySQLを連動させて、DBのnameカラムに格納したデータを、linkカラムに格納したurlのデータ（nullのものもある）をhrefに格納して、urlのデータが存在するものだけaタグのリンクが有効になるようにしようと考えております。

毎度初歩的内容かとは存じますが、ご回答お願い致します。

行動規範の内容に同意します

回答2件

下線だけ消したいのであれば、CSSでの対応が可能です（状況によっては、詳細度の関係上調整が必要かもしれません）。

CSS
1a[href=""]{
2  text-decoration: none;
3}

jsFiddleでの実装例

投稿2020/10/12 05:17

maisumakun

総合スコア145208

ベストアンサー

こんにちは。

CSSで対応するのはいかがですか？

サンプル

css
1a[href=""]{
2  all: inherit;
3  pointer-events:none;
4}

投稿2020/10/12 05:17

Lhankor_Mhy

総合スコア36156

Nishin

2020/10/12 05:51

！盲点でした。JSでなくCSSでも出来るのですね。 pointer-eventsをnoneにすることで、カーソルが切り替わったり、クリックするとページの先頭に飛んでしまうような効果はなくなるのですね。 all: inheritについては、私の方でググって解明してみます。投降後すぐさまご回答頂きまして、ありがとうございました。助かります。

行動規範の内容に同意します

あなたの回答