web-dev-qa-db-fra.com

Solution Javascript Supprimer une balise spécifique mais laisser le reste dans une DIV spécifique

J'ai une structure div qui ressemble à ceci ...

<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>

Ceci est fait dans l'administrateur Wordpress pour le post et s'affiche lorsque j'utilise

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

Ce que je veux faire, c'est supprimer les balises <a> qui apparaissent UNIQUEMENT entre la classe div "gallery_lightview" et laisser la balise <img>. Donc, une fois que tout est enlevé, cela ressemble à ...

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

Fondamentalement, cela en fait une image non cliquable. Est-ce possible? Sa va sur un site mobile et je ne veux pas que cela soit dans l'en-tête. Vraiment voulu que ce soit un Javascript autonome qui se trouvait au-dessus de l'appel "the_content" Wordpress (où se trouve le code "gallery_lightview" div.

J'ai choisi de ne pas utiliser jQuery car, étant donné que son téléphone portable augmenterait la charge. Et littéralement, la seule chose que la bibliothèque ferait serait de supprimer la balise <a>.

Des idées?

Je voulais que le Javascript vienne dans le modèle de page .php, je n'ai donc pas à aller dans tous les posts et à ajouter le Javascript aussi. Est-ce possible?

ADDITION

Je veux fondamentalement désactiver toute balise <a> dans "gallery_lightview" afin que seule la balise "img" soit laissée et affichée

customizationjavascriptpage-templatecontentmobile
1
Matt
<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>
1
sorich87

n'a pas testé, mais essayez ceci:


var cnt = $(".lightview_main").contents()
$(".lightview_main").replaceWith(cnt);
$("a.lightview").remove();
0
Pippin