如何使用jQuery或javascript编辑父标记的html？

Question

I'm using Shopify to host my online store, and have added some images to a page which I would like to be static.

Unfortunately Shopify wants to turn these into lightboxes using fancybox, and it is turning the image I supply into the child of a link tag. So in the code that I can edit, I see this:

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

but when I load the page it has done this:

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

I would rather not edit the original file that is causing this behaviour, because it's being used site-wide, and I know I will cause something else to stop working as intended if I do.

Is it possible to remove the link tag retrospectively?

Thanks for any suggestions!

Answer 1

Use .unwrap() jQuery function.

Please check below 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

You can try with the jQuery unwrap function.

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

Link to jQuery doc