如何使用 jQuery 或 javascript 编辑父标签的 html?

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

我正在使用 Shopify 托管我的在线商店,并已将一些图片添加到我希望是静态的页面。

不幸的是,Shopify 想使用 fancybox 将它们变成灯箱,它正在将我提供的图像变成 link 标签的子标签。所以在我可以编辑的代码中,我看到了这个:

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

我不想编辑导致此行为的原始文件,因为它在整个站点范围内使用,而且我知道如果我这样做,我会导致其他东西按预期停止工作。

是否可以追溯删除 link 标签?

感谢任何建议!

使用.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>

您可以尝试使用 jQuery 解包函数。

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

Link to jQuery doc