Jquery 删除包含img子项的任何段落标记，但不要删除img

我正在使用CMS ExpressionEngine，它将段落标记包装在图像周围。我使用的是响应图像最大宽度：100%，因为我也在定义我的段落的宽度，这会导致问题。我想使用jQuery删除环绕图像的段落标记。我还希望能够从图像中删除宽度和高度属性，因为它们不需要与最大宽度：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，我更愿意避免这种情况。谢谢你的帮助

这应该满足您的需求：

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

这将适用于包装在以下文件中的文件：

---

您可以使用删除封闭节点，并使用删除属性

您可以在设置高度/宽度时使用并重置高度/宽度：

$('p > img').each(function() {
  $(this).unwrap();
  this.height = '';
  this.width = '';
});

---

使用选择器查找包含图像的p标记，然后拉出该节点并将其放回：

var $img = $('p').find('img');
$img.parent().replaceWith($img);
$img.css('height','');
$img.css('width','');

---

这是未经测试的，因此我不能完全确定逻辑是否正确，但这些是您想要使用的基本功能/流程。

您可以尝试以下方法：

$('p + img').replaceWith(function() {
  return $(this).contents().removeAttr('width height');
});

---

从上面偷了最后一点

@KeithFrey:不，我没有。哦，真想不到，我不知道解包功能，它很棒，比我想象的要简单得多。非常感谢。我错过了一些东西——一些图片周围会有锚定标签。在这种情况下，我仍然希望删除图像及其锚定周围的段落标记，但保留图像及其锚定标记。可以用类似的方式吗？@EricCarl Try$'p'。找到'img'。展开。移除'height'。移除'width'；

var $img = $('p').find('img');
$img.parent().replaceWith($img);
$img.css('height','');
$img.css('width','');

$('p + img').replaceWith(function() {
  return $(this).contents().removeAttr('width height');
});