jQuery:无法清空嵌套段落

Question

我正在尝试清空 div 中的一个段落。段落包含其他元素:div、文本、图像、跨度等。

<div id="div_id">test
    <p>
        text inside the paragraph
        <div id="text">hello hello hello</div>
        <img src="http://www.mygifto.com/upload/product/26922984_l.jpg" width="200" height="200" alt="Banner" />
    </p>
    hi
</div>
out of div

最简单的解决方案应该是使用 empty() 函数，但它根本不起作用，它只删除段落内的文本。

$('#div_id p').empty();

我必须指定 div_id，因为页面中还有其他 p，它们不应该为空。

Fiddle here

我试过

$('#div_id p').children('*').remove();

但没有成功。如何删除段落中的所有元素？

Answer 1

问题是因为您的 HTML 无效。内联 p 中不能有 block 级 div 元素。

将 #text div 更改为带有 display: block 的 span，它会起作用.

<p>
    <span id="text">hello hello hello</span>
    <img src="http://www.mygifto.com/upload/product/26922984_l.jpg" width="200" height="200" alt="Banner" />
</p>

#text {
    border: 1px solid red;
    display: block;
}

Updated fiddle