۱ Mahdi Mohaqeq
مشکل در هاید کردن المان ها
جامعه Html & CSS ایجاد شده در ۲۱ شهریور ۱۴۰۰

سلام خدمت دوستان گرامی، با توجه به مسائل گفته شده در جلسه سعی کردم یک سری از المان‌ها رو با متود 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 اضافه هم تولید شده این وسط!!

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

 

 

 

پاسخ رو فهمیدم. اصلا مربوط به js و jquery نیست.

داخل یک تگ p نمیشه یک تگ p دیگه گذاشت. به جای تگ p با کلاس my-p در سوال بالا اگه div بزاریم مشکل برطرف میشه.
گویا از قواعد htmlهست
قاعده ی دقیقش رو نمیدونم ولی سوال مشابهی رو اینجا پرسیدن.


حدس میزنم اینطور باشه که داخل تگ هایی که ماهیت متنی و بلاکی دارن، مثل h1..h6 و یا همین تگ p، نمیشه از تگ‌های دیگری با همین ماهیت متنی و بلاکی استفاده کرد.


علت اینکه توی جلسه هم اون اتفاق افتاد و المان کامل حذف نشد همین مورد بود.

Mahdi Mohaqeq ۲۱ شهریور ۱۴۰۰، ۱۰:۰۸