Sometimes you may need to unwrap some text from an html element – with jQuery you can do it even after the document is already rendered.
Over the years the free JavaScript library jQuery has become very popular among both web designers and web developers. For some it es something like the Swiss Army Knife of webdesign and front end development. And for me it came in very handy when I had to deal with pre-formated html documents that I needed to clean up.
In these documents I have lists of items and basically all should have a working link wrapped around an image. But of course some items don’t have a link – or actually the link is there, but it’s pointing to a page that does not exists. Others items don’t even have an image. Since the html code is as it is, I have no way to check it or alter it on the sever, before it’s rendered, using a php snippet – so I have to do the clean up on the client side through a small jQuery code snippet instead.
This is the actual html code I’m refering to: two entries – first one with a corrupt link (“/node/EMPTY”) and a corrupt image (“/images/EMPTY-thumb.JPG”). The second entry has a working link (“/node/NUMBER”) and an image (“/images/NUMBER-thumb.JPG”). You will notice there is actually a url inside the link tag and an image path inside the image tag – but both are corrupt and lead nowhere. So I need to unwrap the contents of those corrupt links with jQuery: first look into the actual link, check if it’s corrupt – and eventually throw it over board.
<div> <a href="/node/"> <div> <img src="/images/-thumb.JPG"/> </div> <div>term A</div> </a> </div> <div> <a href="/node/64207"> <div> <img src="/images/64207-thumb.JPG"/> </div> <div>term B</div> </a> </div>
The following code is the jQuery function I originally used to unwrap the link tag “a”. It does actually remove the corrupt link on the first item, but it also removes the link from the second item, of any other following item, if any corrupt link tag is found:
// remove corrupt links
$("a").each(function() {
var href = $(this).attr("href");
if(href == '/node/') {
$('a').contents().unwrap();
}
});
So instead of unwrapping all the following links, the function should just unwrap ‘this’ link tag that is actually corrupt. So instead of this:
$('a').contents().unwrap();
it needs to be this:
$(this).contents().unwrap();
So in context the function looks now like this:
// remove corrupt links
$("a").each(function() {
var href = $(this).attr("href");
if(href == '/node/') {
$(this).contents().unwrap();
}
});
What it does, is:
- loop through all links
- put the content of href into the variable ‘href’
- check if the link consists of ‘/node/’ only
- unwrap the contents of this link – leave the previously linked contents an-linked
…so with this little twist the above jquery snippet actually only unwraps contents from the corrupt links – so in my case the link is removed from the picture.
…done.
PS: The above use case is quite a special case – you could however also use this method to unwrap or re-wrap text from inside a div container (or whatever container).
See also:
related links:
- Read more about the unwrap method over at api.jquery.com/unwrap