I have a div structure that looks like this...

<div class="gallery_lightview">
    <div id="lg_image">
        <a href="http://www.website.com/?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" class="lightview_main" title="TITLE HERE">
            <img class="alignnone" src="HEADER.jpg" alt="" />
        <a class="lightview" rel="prettyPhoto[pp_gal]" href="http://pathTophoto.jpg"> </a>

This is done in the Wordpress Admin for the post and gets displayed when I use

<p><?php the_content(); ?></p>

What I want to do is remove the <a> tags that show up ONLY between div class "gallery_lightview" and leave the <img> tag. So once its all stripped out it would look like...

<div class="gallery_lightview">
    <div id="lg_image">
        <img class="alignnone" src="HEADER.jpg" alt="" />

Basically making this a non clickable image. Is this possible? Its going on a Mobile site and I don't want this to be in the header. Really wanted it to be a self contained Javascript that sat above the "the_content" Wordpress call (which is where the "gallery_lightview" div code is.

I choose to not use a jQuery because, since its mobile it would add to the load. And literally the only thing the library would be doing was removing the <a> tag.

Any ideas?

I wanted the Javascript to live in the .php page template so I didn't have to go into every single post and add the Javascript as well. Is this possible?


I basically want to deactivate any <a> tag in "gallery_lightview" so that just the "img" tag is left and displayed

  • Adding javascript does not really make a lot of sense, since there's nothing that has to happen in front of the user's eyes. Just don't put the links there. Jan 23, 2011 at 2:37
  • Its already in the post. On the mobile side, I just need it to strip out those <a> tags
    – Matt
    Jan 23, 2011 at 2:39
  • Is this a WordPress centric question? I understand you're doing this inside WordPress, but it seems to me that this is more a general Javascript question than one specific to WordPress. I'd suggest adding something additional to the question to make this more specific to WordPress else you'll run the risk of having the question closed as off-topic(i considered voting to close myself but i'll hold my vote for now).
    – t31os
    Jan 23, 2011 at 10:42
  • Is this added via a shortcode in the content? Wouldn't it be possible to override the shortcode when you are displaying it in a mobile device? (Use @Jan in your reply so I get a notification)
    – Jan Fabry
    Jan 24, 2011 at 11:33

2 Answers 2

<script type="text/javascript">
function removeLink() {
    theAs = document.getElementById('lg_image').childNodes; // get all children of div#lg_image

    for( i = 0; i < theAs.length; i++ ) { // loop through the children
        if( theAs[i].nodeType != 3 ) { // if the child is not a whitespace,
            theImg = theAs[i].innerHTML; // it is the a which contains the img, so save its content

    document.getElementById('lg_image').innerHTML = theImg; // set the img as content of div#lg_imagei

function addEvent(obj, evType, fn) { 
    if (obj.addEventListener) { 
        obj.addEventListener(evType, fn, false); 
        return true; 
    } else if (obj.attachEvent) { 
        var r = obj.attachEvent("on"+evType, fn); 
        return r; 
    } else { 
        return false; 

addEvent(window, 'load', removeLink);
  • No dice, just tried it. Should this go before or after the_content call
    – Matt
    Jan 23, 2011 at 12:54
  • I put it before the_content call
    – Matt
    Jan 23, 2011 at 12:59
  • I modified the code so that the link removal runs after html is loaded. It is better to put it right before the closing </body> tag
    – sorich87
    Jan 23, 2011 at 13:25

haven't tested, but try this:

var cnt = $(".lightview_main").contents()
  • So it would be.. <script type="text/javascript"> var cnt = $(".lightview_main").contents() $(".lightview_main").replaceWith(cnt); $("a.lightview").remove(); </script> ...
    – Matt
    Jan 23, 2011 at 3:59
  • No dice. Just tried it
    – Matt
    Jan 23, 2011 at 4:05
  • Basically I wanted to strip out or deactivate any <a> tag and leave the <img> tag
    – Matt
    Jan 23, 2011 at 4:09
  • The code provided is jQuery, you'd need to load jQuery in order for it to be any use.
    – t31os
    Jan 23, 2011 at 10:36
  • as t310s saide, you need to load jQuery for it to work. You can do that in your header.php with wp_enqueue_script('jquery'); Just be sure to place it above the wp_head(); call.
    – Pippin
    Jan 23, 2011 at 16:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.