التابع .remove() في jQuery
.remove( [selector ] )
القيم المعادة
يعيد كائنًا من النوع jQuery.
الوصف
يحذف هذا التابع مجموعة العناصر المطابقة من DOM.
.remove( [selector ] )
أُضيف مع الإصدار: 1.0.
selector
سلسلة نصية تمثِّل تعبير المحدد الذي يرشِّح مجموعة العناصر المطابقة لإزالتها.
يطرح التابع .remove() عناصر محدَّدة خارج DOM بطريقة مماثلة لما يفعله التابع .empty(). استعمل التابع .remove() لحذف عنصر معين بذاته بالإضافة إلى حذف كل شيء بداخله. أضف إلى ذلك أيضًا أنه يحذف جميع الأحداث وبيانات jQuery المرتبطة والمتعلقة بالعنصر. إن أردت حذف العنصر دون حذف البيانات والأحداث تلك، فاستعمل التابع .detach().
بفرض وجود شيفرة HTML التالية:
<div class="container">
<div class="hello">مرحبًا</div>
<div class="goodbye">مع السلامة</div>
</div>
يمكننا اختيار أيَّ عنصر لحذفه مثل:
$( ".hello" ).remove();
ستكون النتيجة هي بنية DOM السابقة ولكن دون وجود العنصر <div> المحذوف:
<div class="container">
<div class="goodbye">مع السلامة</div>
</div>
إن كان هنالك أية عناصر متشعبة داخل العنصر <div class="hello">، فستُحذف أيضًا مهما بلغ عددها. ستُحذف أيضًا جميع بنى jQuery المرتبطة بالعنصر مثل بيانات أو معالجات الأحداث.
يمكننا أيضًا تمرير محدِّد إلى التابع اختياريًّا، فنستطيع مثلًا إعادة كتابة شيفرة الحذف السابقة بالشكل التالي:
$( "div" ).remove( ".hello" );
ستكون النتيجة مماثلة لما حصلنا عليه آنفًا:
<div class="container">
<div class="goodbye">مع السلامة</div>
</div>
أمثلة
حذف جميع الفقرات <p> من شجرة DOM:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>remove مثالٌ عن استعمال التابع</title>
<style>
p {
background: yellow;
margin: 6px 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>مرحبًا</p>
كيف
<p>حالك؟</p>
<button>احذف جميع الفقرات</button>
<script>
$( "button" ).click(function() {
$( "p" ).remove();
});
</script>
</body>
</html>
حذف جميع الفقرات <p> التي تحتوي على العبارة "مرحبًا" من شجرة DOM. يمكن استعمال $("p").filter(":contains('Hello')").remove() أيضًا لأداء الغرض نفسه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>remove مثالٌ عن استعمال التابع</title>
<style>
p {
background: yellow;
margin: 6px 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p class="hello">مرحبًا</p>
كيف
<p>الحال؟</p>
<button>احذف الفقرة التي تحتوي على “مرحبًا”</button>
<script>
$( "button" ).click(function() {
$( "p" ).remove( ":contains('مرحبًا')" );
});
</script>
</body>
</html>