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.
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/
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.
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.
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:
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
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
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).