jquery - 删除任何具有 img 子级的段落标签，但不删除 img

Question

我正在使用一个 CMS (ExpressionEngine)，它将段落标签包裹在图像周围。我正在使用响应式图像(最大宽度:100％)，并且由于我还在段落上定义宽度，因此它会导致问题。我想使用 jQuery 删除图像周围的段落标签。我还希望能够从图像中删除宽度和高度属性，因为这些属性不需要与 max-width:100% 结合使用。

以下是修改前的 HTML 示例:

<div class="content">
<p>Hello! This is text content in a blog post.</p>
<p><img src="hello.jpg" width="300" height="300" alt="Hello!" /></p>
<p>This is more text content in the blog pst.</p>
</div>

...这就是我想要的结果:

<div class="content">
<p>Hello! This is text content in a blog post.</p>
<img src="hello.jpg" alt="Hello!" />
<p>This is more text content in the blog pst.</p>
</div>

我可以将 ExpressionEngine 的字段格式从“XHTML”更改为“none”，但这需要发布内容的人编写我希望避免的 HTML。感谢您的帮助!

Answer 1

这应该可以满足您的要求:

$('p > img').removeAttr('height').removeAttr('width').unwrap();

这适用于 <img>包裹在 <a> :

$('p > a > img').removeAttr('height').removeAttr('width').parent().unwrap();