مشکل در هاید کردن المان ها

سلام خدمت دوستان گرامی، با توجه به مسائل گفته شده در جلسه سعی کردم یک سری از المان ها رو با متود hide از صفحه حذف کنم که به اشکال عجیبی برخوردم.

کد html : 

<div id="container">
	<p class="my-p">
			<span class="my-span">
        		my-span
        		<p class="my-p2">
        			my-p2
        		</p>
        	</span>
        	<i>
        		i
        	</i>
        	<p>
        		paragraph
        	</p>
	</p>
</div>

کد js :

$(document).ready(function(){
    $("#container .my-p").hide();
});

انتظار این بود که المان p با کلاس my-p به کل حذف شه که قاعدتا باید عناصر داخلی اون هم حذف بشن.
اما این انتظار برآورده نشد!

دلیلش رو توی inspect جستجو کردم و به این مساله برخوردم !
کد html مرورگر با کدی که من زدم فرق داره !
کد html گرفته شده از inspect :

<div id="container">
      <p class="my-p" style="display: none;">
        <span class="my-span">
        	my-span
        </span>
      </p>
      <p class="my-p2">
      	my-p2
      </p>
      <i>
      	i
      </i>
      <p>
      	paragraph
      </p>
      <p></p>
</div>

توی کد من یه تگ p داریم که والد بقیه ی تگ های داخل کانتینر هست. تگ p با کلاس my-p

اما توی این کد تگ p.my-p کلا دیگه والد بقیه نیست ! یه سری تگ p اضافه هم تولید شده این وسط!!

علت چیه؟!
همون مفهوم تراورس کردنه؟!