Jack Watson Jack Watson - 2 months ago 9
jQuery Question

How to edit html of parent tag using jQuery or javascript?

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

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>

Comments