Remove a href from links using jQuery

JavaScript
1

Hi all

What I’d like to do is remove all the ‘a’ tags and ‘href’s’ from some external links inside a certain div#someID or div.someclass.
For example, if I have an article showing a number of external links www.example.com which are clickable due to <a href=“”><a/> I want to remove the markup but still show the link string.

I’ve made a start, though how do I remove all the links markup?

$("a").removeAttr("href");

I’d like:

<a href="www.example.com"> www.example.com</a>

to become

www.example.com

If you wondering why I don’t just remove them manually, I don’t have much control due to a feed import.

Thanks, Barry

2

Hi,

I see you’re using jQuery, so I’ll go with that.

What you need to do is to iterate over the links, grab the text you need, insert it before the link, then remove the link.

Something like this:

<div class="linksContainer">
    <a href="www.example.com">www.example1.com</a><br />
    <a href="www.example.com">www.example2.com</a><br />
    <a href="www.example.com">www.example3.com</a><br />
    <a href="www.example.com">www.example4.com</a>
</div>

$("div.linksContainer").find("a").each(function(){
    var linkText = $(this).text();
    $(this).before(linkText);
    $(this).remove();
});

Here’s a demo.

HTH

3

Perfect! :slight_smile:

Thanks Pullo, exactly what I need thank you.

I see you’re using jQuery, so I’ll go with that.

Out of curiosity, is it easier/better to use just javascript?

Another approach I would like, instead over removing the link, add rel=“external” to <a href=“” rel=“external”></a> and maybe target=“_blank”.

Which becomes

<a href="" rel="external" target="_blank"></a>

?

Cheers, Barry

4

Hi,

It depends.
jQuery is an external dependency which will have a footprint (i.e. you are forcing your users to download however many KB of JavaScript in so far as they don’t have it cached already).
Therefore, if you care about page weight (and you probably should), you should always consider if it is really necessary to use it.
As a rule of thumb: if you are including the whole library to do something simple, then you might want to reconsider if this is the best approach.
However, I’m not the best advocate in this case. I love jQuery’s concise syntax (e.g. $(selector) instead of document.getElementById(selector)) as well as the fact that it has your back in regard to many edge cases, so I use it a lot.
A handy resource is: http://youmightnotneedjquery.com/

5

As a rule of thumb: if you are including the whole library to do something simple, then you might want to reconsider if this is the best approach.

Absolutely. In this instance, the jQuery library is already loaded due to the CMS I’m using so not much of an issue here for this project.

Thanks for the resource.
Just wondering what the page means when they have jQuery vs IE8+ or IE9+ (Is this basically showing you the code you need to write if you don’t use the framework?)

And do you have any examples for adding markup to the links as outline below, this is the alternative instead of removing the link.

<a href="" rel="external" target="_blank"></a>

Cheers, Barry

6

Hi,

An example:

You want to write this:

$(".myClass").hide();

However, you don’t want to load jQuery for the sake of this little snippet.

So, go to http://youmightnotneedjquery.com/ select the oldest version of IE that you want to support (by moving the slider) and type “hide” into the search box.

The second result (annoyingly) will be:

JQUERY                    IE8+
$(el).hide();             el.style.display = 'none';

This means that the plain JS equivalent of $(el).hide(); would be el.style.display = 'none';.
This will work in version 8 of IE and upwards (it will also work in lower versions, but IE8 is the baseline for this site).

OK, so now we need to work out the equivalent of $(".myClass") in plain j#JS.

The dollar sign in the jquery library is an alias for jQuery, that is $(el).hide(); is the same as jQuery(el).hide();.

So, type “jQuery” into the box and about one third of the way down the search results, you’ll see this:

JQUERY                           IE8+
$('.my #awesome selector');      document.querySelectorAll('.my #awesome selector');

OK, that seems to work on IE8, too. Bonus.

Therefore this:

$(".myClass").hide();

translates to this in plain JS:

var els = document.querySelectorAll('.myClass');
for (var i = 0, len = els.length; i < len; i++) {
  els[i].style.display = 'none';
}

Sure:

$("div.linksContainer").find("a").each(function(){
    this.href="";
    this.target="_blank";
    this.setAttribute("rel", "external");
});

New demo

7

Magic!

However, you don’t want to load jQuery for the sake of this little snippet.

Yes I see what your saying now and can see the real benefit here if we only need a small snippet.
I’ve done a bit of JS in the past and much prefer writing a couple of lines of code than loading the full library.

I’ve just bookmarked the resource something I’ll be sure to come back to :cool:

Cheers for the information Pullo and detailed explanation really helps thank you.

Code is working good.
I can now remove the module I’ve been trying to configure in the CMS, with the bonus of less configuration load, similar to not loading the full library :slight_smile:

Thanks, Barry

8

Hi Barry,

No problem - happy to help :slight_smile:

Just as a final word:

There are lots of ways to optimize your site (SitePoint recently published a great 4 part series on this), so please don’t think that jQuery is inherently evil as it bloats your page.
Infact, used correctly, jQuery is more awesome than a monkey wearing a tuxedo made out of bacon, riding a cyborg unicorn with a lightsaber for the horn (as the saying goes).

9

haha cool!

Cheers and will do, I’ll have a look.
jQuery also a big plus to have on your tool belt for potential work :cool:

Thanks again, Barry

10