how to hide an inside element in js dom

Question

<p style="display:none">ppp<pre>123</pre></p>

this will show the text "123",My purpose is once I hide a element,all children will hide too,but why not? In javascript,I can get the children of "p" tag and hide each one.it's too troublesome. I want a simple way,like "display:none;withChildren:all" once and for all. Is there any way?

Answer 1

The <pre> and <p> tag are both HTML block tags, which are not allowed to be nested inside of each other. Browser doesn't understand and render them separately, you can check by open developer tool to check the HTML code.

Instead, you should try using <span> or any inline-block tag.

Answer 2

You could use .children . For example.

$("p").children().hide(); // hide all children of `p`
$("p").hide(); // hide `p`

You could also use CSS selectors. Like so.

$("p *").hide(); // hide all children of `p`
$("p").hide(); // hide `p`