آموزش نحوه حذف کردن عناصر DOM در جی کوئری
در این قسمت از آموزش گام به گام جی کوئری قصد داریم تا نحوه حذف کردن و مخفی کردن عناصر element در یک سند HTML را به کمک jQuery توضیح دهیم. همانطور که در قسمت های قبلی مشاهده کردید، جی کوئری متدهایی را فراهم آورده که به کمک آن ها می توانید عناصر HTML را انتخاب کرده و مقادیر یا خاصیت های آن عنصر را خوانده و یا ویرایش کنید. در این قسمت به معرفی متدهای ()empty()، remove()، removeAttr()، hide و ()show خواهیم پرداخت.
متد ()empty در جی کوئری:
به کمک متد ()empty می توانید تمام فرزندان یک عنصر خاص را حذف کنید.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">
<h3>به وب سایت چسبون خوش آمدید</h3>
<p>این یک متن آزمایشی است</p>
</div>
<button id="submit" name="submit">Clear Element</button>
<script>
$(document).ready(function() {
$("#submit").click(function() {
$("#myDiv").empty();
});
});
</script>
</body>
</html>متد ()remove در جی کوئری:
متد ()remove تمام فرزندان یک عنصر را حذف می کند.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">
<h3>به وب سایت چسبون خوش آمدید</h3>
<p>این یک متن آزمایشی است</p>
</div>
<button id="submit" name="submit">Clear Element</button>
<script>
$(document).ready(function() {
$("#submit").click(function() {
$("a").remove();
});
});
</script>
</body>
</html>تفاوت متد ()remove با متد ()empty در این است که متد ()empty تنها عناصر داخل یک element را حذف می کند و خود عنصر باقی می ماند اما متد ()remove عنصر انتخاب شده را نیز حذف خواهد کرد.
متد ()removeAttr در جی کوئری:
با استفاده از متد ()removeAttr در جی کوئری می توان یک خاصیت (Attribute) را در یک عنصر HTML حذف کرد. برای مثال زمانیکه بخواهید خاصیت href یک تگ a را حذف کنید کافیست کد زیر را اجرا کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">
<h3>به وب سایت چسبون خوش آمدید</h3>
<p>این یک متن آزمایشی است</p>
<a href="https://chasboon.ir" class="mylink" title="chasboon.ir" target="_blank">Home page</a>
</div>
<button id="submit" name="submit">Clear Element</button>
<script>
$(document).ready(function() {
$("#submit").click(function() {
$("a").removeAttr('href');
});
});
</script>
</body>
</html>متد ()hide در جی کوئری:
متدهایی که در بالا معرفی شدند به منظور حذف یک عنصر یا خاصیت بکار می روند. گاهی اوقات نیاز دارید تا عنصر حذف نشود بلکه برای مدت زمانی مخفی مانده و نمایش داده نشود. اینکار با تنظیم خاصیت display آن عنصر در css امکان پذیر می باشد. به کمک متد ()hide در جی کوئری می توانید یک عنصر را مخفی کنید تا از دید کاربر قابل رویت نباشد. اما کدهای مربوط به آن عنصر پاک نشده اند. به مثال زیر توجه کنید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">
<h3>به وب سایت چسبون خوش آمدید</h3>
<p>این یک متن آزمایشی است</p>
<input type="text" name="username" id="text">
</div>
<button id="submit" name="submit">Hide Input</button>
<script>
$(document).ready(function() {
$("#submit").click(function() {
$("#text").hide();
});
});
</script>
</body>
</html>متد ()show در جی کوئری:
عناصری که با متد ()hide مخفی شده اند را می توان با متد ()show نمایان کرد. این متد خاصیت display عنصر مورد نظر را از حالت none خارج می کند.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv">
<h3>به وب سایت چسبون خوش آمدید</h3>
<p>این یک متن آزمایشی است</p>
<input type="text" name="username" id="text">
</div>
<button id="hide" name="hide">Hide Input</button>
<button id="show" name="show">Show Input</button>
<script>
$(document).ready(function() {
$("#hide").click(function() {
$("#text").hide();
});
$("#show").click(function() {
$("#text").show();
});
});
</script>
</body>
</html>لطفا نظرات و پیشنهادات خود را جهت ارتقا کیفیت مطالب سایت با ما در میان بگذارید.
