لوگو دویکس
ورود / ثبت نام
حذف کردن عنصر با jQuery

حذف کردن عنصر با jQuery

دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 17 مرداد 1401

حذف کردن عنصر با jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. jQuery متدهای remove() و empty() را برای حذف عناصر HTML موجود از یک سند HTML فراهم کرده است.

متد remove() در jQuery

متد remove() عنصر(های) انتخاب شده و عناصر فرزند آن را از سند HTML حذف می‌کند. در اینجا نحو و ساختار ساده برای استفاده از این متد آمده است:

$(selector).remove();

زمانی که می‌خواهید خود عنصر و همچنین هر چیزی که داخل آن است را حذف کنید، باید از متد remove() استفاده کنید.

محتوای HTML زیر را در نظر بگیرید:

<div class="container">
   <h2>jQuery remove() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>

حال اگر متد remove() را به صورت زیر اعمال کنیم:

$( ".hello" ).remove();

نتیجه زیر را ایجاد خواهد کرد:

<div class="container">
   <h2>jQuery remove() Method</h2>
   <div class="goodbye">Goodbye</div>
</div>

اگر تعدادی عنصر تودرتو در داخل <“div class=”hello> داشتیم، آن‌ها نیز حذف می‌شدند.

مثال حذف کردن عنصر با متد remove() در jQuery

بیایید نگاهی به مثال زیر بیاندازیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).remove();
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery remove() Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>
   
   <button>Remove Text</button>
</body>
</html>

با فیلتر حذف کردن

برای پاک کردن یک عنصر از سند HTML همچنین می‌توانیم یک انتخابگر را به عنوان پارامتر اختیاری برای متد remove() قرار دهیم. برای مثال، می‌توانیم کد حذف قبلی DOM را به صورت زیر بازنویسی کنیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("div").remove(".hello");
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery remove(selector) Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>
   
   <button>Remove Text</button>
</body>
</html>

متد empty() در jQuery

متد empty() بسیار شبیه به remove() است و عنصر(های) انتخاب شده و عناصر فرزند آن را از سند حذف می‌کند. این روش هیچ استدلالی را نمی‌پذیرد. در اینجا نحو و ساختار ساده برای استفاده از این متد آمده است:

$(selector).empty();

زمانی که می‌خواهید خود عنصر و همچنین هر چیزی که داخل آن است را حذف کنید، باید از متد empty() استفاده کنید.

محتوای HTML زیر را در نظر بگیرید:

<div class="container">
   <h2>jQuery empty() Method</h2>
   <div class="hello">Hello</div>
   <div class="goodbye">Goodbye</div>
</div>

حال اگر متد empty() را به صورت زیر اعمال کنیم:

$( ".hello" ).empty();

نتیجه زیر را ایجاد خواهد کرد:

<div class="container">
   <h2>jQuery empty() Method</h2>
   <div class="goodbye">Goodbye</div>
</div>

مثال حذف کردن عنصر با متد empty() در jQuery

بیایید نگاهی به مثال زیر بیاندازیم:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $( ".hello" ).empty();
      });
   });
</script>
</head>
<body>
   <div class="container">
      <h2>jQuery empty() Method</h2>
      <div class="hello">Hello</div>
      <div class="goodbye">Goodbye</div>
   </div>
   <br>
   
   <button>Remove Text</button>
</body>
</html>

مطالعه مقاله مرجع Html/Css در jQuery برای دسترسی به لیست کامل متدهای Html/Css در جی کوئری به شما پیشنهاد می‌شود؛ امیدواریم از مطالعه مقاله حذف کردن عنصر با jQuery  لذت برده باشید. لطفاً نظرات خود را با ما به اشتراک بگذارید و سئوالات خود را در بخش نظرات مطرح کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊