آموزش متدهای remove و empty در جی کوئری

هدایت عباسی آموزش جی کوئری

آموزش ویدئویی remove و empty در جی کوئری

دانلود فیلم و آموزش ویدئویی متدهای remove و empty در جی کوئری. در این فیلم با این دستورات آشنا می شوید و نحوه کار با آنها را فرا می گیرید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش جی کوئری (Jquery tutorial) از تاپ سایت 98 قصد داریم به آموزش دستورات remove و empty در جی کوئری بپردازیم.

توجه : کدها همه تست شده می باشد و کاملا صحیح است. چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

خطا

چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

در صورتی که کد بالا اجرا نمی شود می توانید بجای cdn از فایل جی کوئری استفاده نمایید.

بایستی فایل جی کوئری را دانلود کرده باشید.

آموزش دانلود جی کوئری

آموزش دستور و متد remove در جی کوئری

در این قسمت به آموزش دستور و متد remove در جی کوئری می پردازیم.

متد remove در جی کوئری برای حذف یک عنصر بکار می رود.

در مثال زیر با کلیک روی دکمه ، تگ های p حذف می شوند.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:200px;width:300px;border:1px solid black;background-color:yellow;">
<h1>TopSite98.com</h1>
<p>website</p>
<p>sh711.com</p>
</div>
<br>
<button>Remove p</button>
</body>
</html>

اگر بخواهیم تگ h1 حذف شود می توانیم بجای p ، مقدار h1 را وارد نماییم.

کد را به این صورت تغییر می دهیم.

$("h1").remove();

آموزش دستور و متد empty در جی کوئری

حال به سراغ آموزش دستور و متد empty در جی کوئری می رویم.

متد empty برای خالی کردن باکس استفاده می شود. در مثال زیر با کلیک روی دکمه ، محتوای داخل div خالی می شود.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:200px;width:300px;border:1px solid black;background-color:yellow;">
<h1>TopSite98.com</h1>
<p>website</p>
<p>sh711.com</p>
</div>
<br>
<button>empty div</button>
</body>
</html>

امیدواریم این آموزش برای شما مفید باشد. کدهای بالا تست شده می باشند.

موفق باشید.

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

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید