html5 - jQuery: Cannot empty a nested paragraph -

i'm trying empty paragraph inside div. paragraph contains others elements: div, text, images, span etc.

<div id="div_id">test     <p>         text inside 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 use empty() function doesn't work @ all, removes text inside paragraph.

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

i have specify div_id because i've others p inside page , should not empty.

fiddle here

i've tried

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

but without success. how can remove elements inside paragraph?

the problem because html invalid. cannot have block-level div element inside inline p.

change #text div span display: block on it, , 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