Wie HTML des Eltern-Tags mit jQuery oder Javascript bearbeiten?

Question

Ich verwende Shopify, um meinen Online-Shop zu hosten, und habe einige Bilder zu einer Seite hinzugefügt, die ich statisch sein möchte.

Leider möchte Shopify diese mithilfe von fancybox in Leuchtkästen verwandeln und es verwandelt das Bild, das ich anbiete, in das Kind eines Link-Tags. Also in dem Code, den ich bearbeiten kann, sehe ich:

<div style="text-align: center;"> 
<img src="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" alt="elle decoration magazine" style="display: inline-block; padding: 0 25px;"/> 
</div> 

aber wenn ich die Seite es getan hat, laden diese:

<div style="text-aling: center;"> 
<a href="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" class="fancyboximg"> 
    <img src="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" alt="elle decoration magazine" style="display: inline-block; padding: 0 25px;"/> 
</a> 
</div> 

würde ich lieber die Originaldatei nicht bearbeiten, dass dies verursacht Verhalten, weil es Site-weit verwendet wird, und ich weiß, dass ich etwas anderes veranlassen werde, wie beabsichtigt zu arbeiten, wenn ich tue.

Ist es möglich, das Link-Tag nachträglich zu entfernen?

Vielen Dank für Anregungen!

Answer 1

Verwenden Sie .unwrap() jQuery-Funktion.

Bitte überprüfen Sie das folgende Snippet.

$(document).ready(function(){ 
 
    $('.fancyboximg > #remove-fancy').unwrap(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="text-aling: center;"> 
 
    <a href="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" class="fancyboximg"> 
 
    <img id="remove-fancy" src="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" alt="elle decoration magazine" style="display: inline-block; padding: 0 25px;"/> 
 
    </a> 
 

 
    <a href="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" class="fancyboximg"> 
 
    <img src="//cdn.shopify.com/s/files/1/1333/8187/t/6/assets/ASI_elle_decoration.jpg?9949612793051485599" alt="elle decoration magazine" style="display: inline-block; padding: 0 25px;"/> 
 
    </a> 
 
</div>

Answer 2

Sie mit der jQuery unwrap Funktion ausprobieren können.

var imgTags = $("img");  
if (imgTags.parent().is("a")) { imgTags.unwrap(); } 

Link to jQuery doc