jquery - jQuery：无法清空嵌套段落

Question

我正在尝试清空 div 中的段落。该段落包含其他元素：div、文本、图像、span 等。

<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在页面内还有其他人，它们不应该为空。

在这里提琴

我什至尝试过

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

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

Answer 1

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

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

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

更新的小提琴

Answer 2

问题是 HTML 代码不正确，因此元素不会在段落内结束。段落内不能有块元素。

当浏览器解析了代码并试图充分利用它时，你会得到两个空段落，一个在内容之前，一个在内容之后：

<div id="div_id">test
    <p></p>
        <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></p>
    hi
</div>
out of div

您清空段落的代码将起作用，并且它将清空两个段落元素，但由于它们已经为空，因此没有任何效果，并且它不会删除您期望的元素，因为它们不在任何段落内。

Answer 3

http://validator.w3.org/check

将您的代码粘贴到此并验证。<div>标签不应放在<p>标签内。