如何仅删除直接父p标签

Question

我使用的是富文本编辑器（ckeditor），它将所有内容包装在<p>标记中，甚至是图像。 因此，当我插入图像时，它会执行以下操作：

<div id="description">
    <p>Some introduction the user wrote</p>
    <img src="/path/to/image" />
    <p>Some text here that the user wrote</p>
    <p>Oops an inline image <img src="/path/to/image" /></p>
    <p>More stuff that the user wrote.</p>
</div>

我只想删除#description div中所有图像上的包装<p>标签。

我尝试了$('img').unwrap()但是它剥夺了所有<p>标签。

我也尝试了$('img').replaceWith(function() { return $(this).contents(); }); 从DOM中删除了整个图像。

有什么想法怎么做？ 如果您设法使JSFiddle正常工作，将不胜感激。

Answer 1

$(document).ready(function(){

    $("#description p img").unwrap();

});

Answer 2

你可以试试这个-

$('img').each(function (){
    var $img = $(this);
    var $p = $img.parent('p');
    if($p.val() != undefined)
    {
        $p.replaceWith($img);
    }
});

我在这里添加了对父标记的检查。 因此，如果它是'p' ，那么只有它下面的'img'可以代替。 如果您想要的是'p'下的全部内容，则将最后一行替换为-

$p.replaceWith($p.html());

JSFiddle： http : //jsfiddle.net/t7snLne2/