如何在JavaScript中隐藏span元素，如果anchor href属性为空

任务是在 < a>标签的href属性不存在或无效时隐藏 < span>标签。

假设我们在 < span>标签内部有 < a>标签。它会类似于以下方式：

<span><a href="www.google.com"></a></span>

现在，我们给元素添加ID以识别它们。

<span id="outer"><a id="inner" href="www.google.com"></a></span>

现在，当 < a>标签的“href”属性为空或无效时，我们需要隐藏 < span>标签。

方法：

• 第一种情况是href为空。所以我们只需要检查为空的href，这可以使用原生JavaScript完成。
• 在第二种情况中，href指向一个文件/位置。我们需要检查它是否是有效的文件/位置。现在，在这种情况下，当 href 存在时，我们检查它是否指向某个有效的文件或位置。我们将使用jQuery Ajax调用来完成。jQuery Ajax调用可以用于在幕后与Web服务器交换数据。如果返回错误，则文件的位置无效。

示例1： 下面的代码显示当href为空时。

<span id="outer">
    <a id="inner" href="">这是链接</a>
</span>

<script>
    if (document.getElementById("inner")
        .getAttribute("href") == "") {
        document.getElementById("outer")
            .style.display = "none";
        alert("文件不存在");
    }
</script>

输出：

示例2： 下面的代码是href指向一个位置的示例。

<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

<span id="outer">
    <a id="inner" 
       href=
"https://jsonplaceholder.typicode.com/todos/1">
        这是链接
    </a>
</span>

<script>
    // 检查url是否有效的函数通过进行Ajax调用
    function doesFileExist(url) {
        .ajax({
            headers: {                   'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'            },
            method: 'HEAD',
            url: url,
            success: function () {
                alert("文件存在！");
            },
            error: function () {
                // 隐藏外部span标签("#outer").hide();
                alert("文件不存在！");
            },
        })
    }

    // 存储href指向的位置
    url = $("#inner").attr("href");
    doesFileExist(url);
</script>

输出：

阅读更多：JavaScript 教程