【问题标题】：Remove li if anchor within li is empty or javascript:;如果 li 中的锚点为空或 javascript:; 则删除 li
【发布时间】：2020-06-20 20:20:10
【问题描述】：

我有以下几点：

<ul>

  <li>
    <a href="https:www.google.co.uk">Google</a>
  </li>

  <li>
    <a href="">No href defined, but attribute exists</a>
  </li>
  
  <li>
    <a>No href attribute</a>
  </li>

  <li>
    <a href="javascript:;">dead link</a>
  </li>

</ul>

我正在尝试做的是检查锚点是否具有有效的href。从上面看，如果它有一个链接，那很好，如果它没有一个有效的链接（最后三个li），那么我想删除它的父li。

本质上，在我的 JQuery 运行它的检查之后，我应该留下以下标记：

<ul>
  <li>
    <a href="https:www.google.co.uk">Google</a>
  </li>
</ul>

到目前为止我所尝试的：

if($("ul li a").attr('href') === '' || $(this).text() === '') {
    $(this).closest('li').remove();
}

但以上对我没有任何作用？

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

使用选择器移除锚点

一个快速的解决方案是创建一个以逗号分隔的查询选择器列表：

从每个li（或更具体的选择器）开始并使用.find()
使用[] 属性选择器
和 jQuery 的 :not()
使用 jQuery 的 .closest("li") 来引用祖先元素和 .remove()

$("li").find("a[href=''], a[href='javascript:;'], a:not([href])").closest('li').remove();

<ul>
  <li>
    <a href="https:www.google.co.uk">Google</a>
  </li>
  <li>
    <a href="">No href defined, but attribute exists</a>
  </li>
  <li>
    <a>No href attribute</a>
  </li>
  <li>
    <a href="javascript:;">dead link</a>
  </li>
</ul>

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

使用过滤器删除锚

使用 jQuery 的.filter() 获得更防弹的解决方案

$("li").find("a").filter(function(i, a) {
  const href = a.getAttribute("href");
  return !href || /^javascript/.test(href);
}).closest('li').remove();

<ul>
  <li>
    <a href="https:www.google.co.uk">Google</a>
  </li>
  <li>
    <a href="">No href defined, but attribute exists</a>
  </li>
  <li>
    <a>No href attribute</a>
  </li>
  <li>
    <a href="javascript:;">dead link</a>
  </li>
</ul>

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

在纯 JavaScript 中与上面相同（没有 jQuery）：

document.querySelectorAll("li a").forEach(a => {
  const href = a.getAttribute("href");
  if (!href || /^javascript/.test(href)) a.closest("li").remove();
});

<ul>
  <li>
    <a href="https:www.google.co.uk">Google</a>
  </li>
  <li>
    <a href="">No href defined, but attribute exists</a>
  </li>
  <li>
    <a>No href attribute</a>
  </li>
  <li>
    <a href="javascript:;">dead link</a>
  </li>
</ul>

【讨论】：

【解决方案2】：

<a> 元素与window.location 具有大部分相同的属性，因此您可以过滤没有host 值或具有空属性值的元素

$("li a").filter(function(){
  return !$(this).attr('href') || !this.host;
}).parent().remove()

<ul>
  <li>
    <a href="https:www.google.co.uk">Google</a>
  </li>
  <li>
    <a href="">No href defined, but attribute exists</a>
  </li>
  <li>
    <a>No href attribute</a>
  </li>
  <li>
    <a href="javascript:;">dead link</a>
  </li>
</ul>

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

【讨论】：