jQuery: Cannot empty a nested paragraph

Question

I'm trying to empty a paragraph inside a div. The paragraph contains others elements: div, text, images, span etc.

<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

The simplest solutions should be use the empty() function but it doesn't work at all, it removes only the text inside the paragraph.

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

I have to specify the div_id because I've others p inside the page and they should not be empty.

Fiddle here

I've tried even with

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

but without success. How can I remove all elements inside the paragraph?

score 9 · Accepted Answer · answered Jul 25 '13 at 09:56

9

The problem is because your HTML is invalid. You cannot have a block-level div element inside an inline p.

Change the #text div to a span with display: block on it, and it will work.

<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

answered Jul 25 '13 at 09:56

Rory McCrossan

331,213
40
305
339

Exactly. See [this](http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it) – OzrenTkalcecKrznaric Jul 25 '13 at 10:01

Guffa · Answer 2 · 2013-07-25T12:24:58.450

2

The problem is that the HTML code is incorrect, so the elements doesn't end up inside the paragraph. You can't have block elements inside the paragraph.

When the browser has parsed the code and tried to do the best out of it, you end up with two empty paragraphs, one before the content and one after it:

<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

Your code to empty the paragraph will work, and it will empty both paragraph elements, but as they are already empty it has no effect, and it doesn't remove the elements that you expect as they are not inside any ofthe paragraphs.

edited Jul 25 '13 at 12:24

answered Jul 25 '13 at 10:03

Guffa

687,336
108
737
1,005

1

`text inside the paragraph` actually_is_ inside the paragraph. Only the `div` isn't. – John Dvorak Jul 25 '13 at 11:20
@JanDvorak: Yes, you are right, if you have that text. There wasn't any such text in the fiddle provided. – Guffa Jul 25 '13 at 12:25

score 0 · Answer 3 · edited Jul 25 '13 at 14:43

0

http://validator.w3.org/check

Paste your code in this and validate. A <div> tag should not be placed inside a <p> tag.

edited Jul 25 '13 at 14:43

Ry-

218,210
55
464
476

answered Jul 25 '13 at 10:18

Ramki

166
1
12

jQuery: Cannot empty a nested paragraph

3 Answers3