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>
</div>
</div>
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?
Find the element with class gallery_lightview, find all of its children elements (no matter how deeply nested) that are ‘img’ elements, then remove each of their immediate parent elements (in this case ‘a’ tags).
$(‘img’).insertAfter(‘a’);
Get and insert the element ‘a’ after ‘img’
$(‘a’).remove();
Remove the element ‘a’
Sorry, just thought about it a little more. It’s actually going on a mobile site. So…I choose not to use jQuery (cut down on the load and because I won’t need most of the jQuery functionality).
Anyway this can be done in a self contained Javascript, no in the
<head>?I was thinking it would sit right before the WordPress “
the_content” call, since this is where the div is in. Any help?Sorry for the confusion.