در بخش قبلی با افزودن محتوا در jQuery آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه حذف المان های HTML یا محتوا و خصوصیات آن ها در سند با استفاده از جی کوئری می پردازیم.
حذف محتوا یا المان ها با jQuery
جی کوئری متدهای انگشت شماری مثل empty(), remove(), unwrap() و .. را برای حذف المان های HTML یا محتوای آن ها از سند ارایه داده است.
متد empty() جی کوئری
متد empty() در جی کوئری همه المان های فرزند با دیگر فرزندان و محتوای متنی داخل المان های انتخاب شده از DOM را حذف می کند.
مثال زیر همه محتوای داخل المان ها با کلاس .container را با کلیک روی دکمه حذف می کند.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ // Empty container element $("button").click(function(){ $(".container").empty(); }); }); </script> |
نکته: بر اساس مشخصات DOM در کنسرسیوم جهانی وب W3C , هر رشته از متن داخل یک المان به عنوان گره (node) فرزند آن المان درنظر گرفته می شود.
متد remove() جی کوئری
متد remove() در جی کوئری همه المان های انتخابی از DOM و همه چیز داخل آن را پاک می کند.
به علاوه خود المان ها, همه رویدادهای محدود و داده های jQuery اختصاص داده شده به المان ها نیز حذف می شوند.
مثال زیر همه المان های <p> با کلاس .hint را از DOM با کلیک روی دکمه حذف می کند. المان های تو در تو داخل پاراگراف ها نیز حذف خواهد شد.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ // Removes paragraphs with class "hint" from DOM $("button").click(function(){ $("p.hint").remove(); }); }); </script> |
متد remove() در جی کوئری می تواند شامل یک سلکتور به عنوان پارامتر اختیاری باشد که به شما اجازه می دهد المان هایی که باید حذف شوند را فیلتر کنید.
برای نمونه, مثال قبلی را بصورت زیر بازنویسی می کنیم :
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ // Removes paragraphs with class "hint" from DOM $("button").click(function(){ $("p").remove(".hint"); }); }); </script> |
نکته : همچنین می توانید سلکتور را به عنوان یک پارامتر داخل متد remove() مثل remove(".hint, .demo") برای فیلتر چندین المان استفاده کنید.
متد unwrap() جی کوئری
متد unwrap() در جی کوئری همه المان های والد از المان های انتخابی را حذف می کند. این متد برعکس متد wrap() در آموزش قبلی است.
مثال زیر به شما حذف المان والد المان های <p> را با دکمه کلیک نمایش می دهد.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ // Removes the paragraph's parent element $("button").click(function(){ $("p").unwrap(); }); }); </script> |
متد removeAttr() جی کوئری
متد removeAttr() در جی کوئری یک خصوصیت را از المان های انتخابی حذف می کند.
مثال زیر خصوصیت href را از المان های <a> با کلیک روی دکمه حذف می کند.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ // Removes the hyperlink's href attribute $("button").click(function(){ $("a").removeAttr("href"); }); }); </script> |
امیدوارم در این بخش آموزش جی کوئری, از حذف محتوا در jQuery نهایت استفاده را برده باشید.
در بخش بعدی با نحوه دستکاری کلاس CSS با jQuery , آشنا می شوید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
