Question

I’m working with a CMS (ExpressionEngine) that wraps paragraph tags around images. I’m using responsive images (max-width:100%) and since I’m also defining widths on my paragraphs, its causing problems. I’d like to use jQuery to remove the paragraph tags that are wrapped around the images. I’d also like to be able to have the width and height properties removed from the images as well, as these aren’t needed in combination with max-width:100%.

Here’s an example of the HTML before modification:

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

…and here’s what I’d like the result to be:

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

I could just change ExpressionEngine’s field format from “XHTML” to “none”, but that would require the person posting content to write HTML which I’d prefer to avoid. Thanks for any help!

Answer 1

This should do what you’re looking for:

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

This will work for an <img> wrapped in an <a>:

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