Question

我正在尝试清空div中的段落。该段包含其他元素：div，text，images，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，并且它们不应为空。

Fiddle here

我甚至试过

$('#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;
}

Updated fiddle

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>标记内。

jQuery：无法清空嵌套段落

3 个答案: