CODEWITHSUNDEEP
javascripthtmljquery
Freddy
Freddy

Reputation: 867

Remove li if anchor within li is empty or javascript:;

I have the following:

<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>

What I'm trying to do, is to check if an anchor has a valid href. From the above, if it has a link, that's fine, if it doesn't have a valid link (last three li's), then I want to remove its parent li's.

In essence, after my JQuery runs its checks, I should be left with the following markup:

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

What I have tried so far:

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

But the above does nothing for me?

Upvotes: 1

Views: 466

Answers (2)

charlietfl
charlietfl

Reputation: 171669

An <a> element has most of the same properties as window.location so you can filter the ones that don't have a host value or have empty attribute value

$("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>

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

Remove anchors using selectors

A quick solution would be creating a comm separated list of query selectors:

  • Start from every li (or a more specific selector) and use .find()
  • using the [] Attribute selector
  • and the jQuery's :not()
  • Use jQuery's .closest("li") to refer back to an ancestor element and .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>

Remove Anchors using filter

For a more bulletproof solution using jQuery's .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>

The same as above in pure JavaScript (without 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>

Upvotes: 2

Related Questions