জেকুয়েরি - এলিমেন্ট রিমুভ করা
এই অধ্যায়ে আপনি এইচটিএমএল এলিমেন্ট/কন্টেন্ট রিমুভ করা শিখবেন। বর্তমানে অস্তিত্ব/বিদ্যমান আছে এমন এইচটিএমএল এলিমেন্ট/কন্টেন্টকে জেকুয়েরির মাধ্যমে আপনি খুব সহজেই রিমুভ করে দিতে পারেন।
এলিমেন্ট/কন্টেন্ট রিমুভ
জেকুয়েরিতে আমরা দুইভাবে এলিমেন্ট এবং কন্টেন্ট রিমুভ করতে পারি। যথাঃ
remove()মেথড নির্বাচিত(selected) এলিমেন্টকে রিমুভ করে। এক্ষেত্রে নির্বাচিত এলিমেন্টের চাইল্ড এলিমেন্টও রিমুভ হয়ে যায়।empty()মেথড নির্বাচিত এলিমেন্টের চাইল্ড এলিমেন্টকে রিমুভ করে।
জেকুয়েরি remove() মেথড
জেকুয়েরি remove() মেথড নির্বাচিত এলিমেন্ট এবং এর চাইল্ড এলিমেন্টকে রিমুভ করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").remove();
});
});
</script>
</head>
<body>
<div>
<img src="images/satt.png" style="height:140px; width:140px;">
এগুলো div এলিমেন্টের মধ্যের কিছু টেক্সট।
<p>এটি div এলিমেন্টের মধ্যের একটি প্যারাগ্রাফ।</p>
</div>
<br>
<button>div এলিমেন্টটিকে রিমুভ করুন!</button>
</body>
</html>
ফলাফল
জেকুয়েরি empty() মেথড
জেকুয়েরি empty() মেথড নির্বাচিত এলিমেন্টের চাইল্ড এলিমেন্টকে রিমুভ করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<style>
div {
height: 100px;
width: 300px;
border: 1px solid black;
background-color: teal;
color: white;
padding: 8px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<div>
div এ কিছু টেক্সট।
<p>div এ একটি প্যারাগ্রাফ।</p>
<p>div এ আরেকটি প্যারাগ্রাফ।</p>
</div>
<br>
<button>empty() মেথড এর প্রয়োগ দেখুন!</button>
</body>
</html>
ফলাফল
রিমুভ করার জন্য এলিমেন্ট ফিল্টার করা
জেকুয়েরি remove() মেথড একটি প্যারামিটারও গ্রহণ করে, যার মাধ্যমে আপনি ফিল্টারিং এর উপর ভিত্তিকরে এইচটিএমএল এলিমেন্ট রিমুভ করতে পারেন।
remove() মেথড প্যারামিটার হিসাবে জেকুয়েরির যেকোন সিলেক্টর সিনট্যাক্স গ্রহণ করতে পারে।
নিচের উদাহরনে class="para1" এবং class="para2" যুক্ত <p> এলিমেন্টকে কিভাবে রিমুভ করা হয় তা দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".para1, .para2");
});
});
</script>
<style>
.para1 {
color: teal;
font-size: 20px;
}
.para2 {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p class="para1">এটি class="para1" যুক্ত p এলিমেন্ট।</p>
<p class="para2">এটি class="para2" যুক্ত p এলিমেন্ট।</p>
<p class="para3">এটি class="para3" যুক্ত p এলিমেন্ট।</p>
<br>
<button>para1 এবং para2 যুক্ত p এলিমেন্টকে রিমুভ করুন!</button>
</body>
</html>
ফলাফল
জেকুয়েরি এইচটিএমএল রেফারেন্স
জেকুয়েরি এইচটিএমএল মেথডের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি এইচটিএমএল/সিএসএস রেফারেন্স পেজে ভিজিট করুন।