Javascript Solution Remove Specific Tag but leave the rest in a specific DIV

3 Views

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>
        <a class="lightview" rel="prettyPhoto[pp_gal]" href="http://pathTophoto.jpg"> </a>
    </div>
</div>

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

Read More
<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="" />
    </div>
</div>

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?

ADDITION

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

Post Views: 3

Related posts

Leave a Reply

2 comments 

  1. <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
            break;
        }
    }

    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);
</script>