Как отредактировать html родительского тега с помощью jQuery или javascript?

Question

Я использую Shopify для размещения своего интернет-магазина и добавил некоторые изображения на страницу, которую я хотел бы статично.

К сожалению, Shopify хочет превратить их в лайтбоксы с помощью fancybox, и это превратит изображение, которое я поставлю в дочерний элемент тега ссылки. Так в коде, который я могу изменить, я вижу это:

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

, но когда я загрузить страницу он сделал это:

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

Я предпочел бы не редактировать исходный файл, который вызывает это потому что он используется на общесистемном уровне, и я знаю, что я причиню что-то еще, чтобы прекратить работу, как предполагалось, если я это сделаю.

Можно ли удалить тег ссылки ретроспективно?

Спасибо за любые предложения!

Answer 1

Использование .unwrap() Функция jQuery.

Пожалуйста, проверьте ниже фрагмент.

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

Вы можете попробовать с помощью функции UnWrap JQuery.

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

Link to jQuery doc