Query – حذف المان های موجود

آموزش حذف محتوا در Jquery مبحثی است که امروز براتون توضیح میدم. در jQuery می توان به راحتی المان های موجود HTML را حذف کرد.

حذف محتوا/المان

به منظور حذف المان یا محتوای مورد نظر، jQuery دو متد ارائه می دهد:

remove() – المان انتخابی (و عناصر زیرمجموعه ی آن) را حذف می کند

empty() – المان های زیرمجموعه (فرزند) را از عنصر انتخابی حذف می کند

متد remove()

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

نمونه یک
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“button”).click(function () {
$(“#div1”).remove();
});
});

متد empty()

متد empty() تمام المان های فرزند عناصر انتخابی را حذف می کند.

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“button”).click(function () {
$(“#div1”).empty();
});
});

فیلتر کردن المان های انتخاب شده برای حذف

متد ()remove دارای یک پارامتر است که به شما این امکان را می دهد عناصر انتخاب شده را فیلتر کنید.

این پارامتر می تواند نام کلاس، شناسه و یا هر انتخاب گر دیگری باشد.

در نمونه ی زیر همه ی المان های

که دربردارنده ی کلاس “test” هستند، حذف می گردند:

نمونه سه
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“button”).click(function () {
$(“p”).remove(“.test”);
});
});

در مثال زیر تمامی المان های

که در بردانده ی کلاس “test” و “demo” حذف می گردند:

نمونه چهار
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

.test {
color: red;
font-size: 20px;
}
.demo {
color: green;
font-size: 25px;
}