জেকুয়েরি remove() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
remove() মেথড নির্বাচিত এলিমেন্টকে সকল টেক্সট এবং চাইল্ড নোডসহ রিমুভ করে।
এই মেথডটি নির্বাচিত এলিমেন্টের ডেটা এবং ইভেন্টও রিমুভ করে ফেলে।
পরামর্শঃ ডেটা এবং ইভেন্ট ব্যাতীত এলিমেন্ট রিমুভ করতে, detach() মেথড ব্যবহার করুন।
পরামর্শঃ নির্বাচিত এলিমেন্টের শুধুুমাত্র কন্টেন্ট রিমুভ করতে, empty() মেথড ব্যবহার করুন।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).remove(selector)
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে remove() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
selector |
ঐচ্ছিক। যেই বা যেসকল এলিমেন্ট রিমুভ করা হবে সেটিকে নির্দেশ করে। একাধিক এলিমেন্ট রিমুভ করতে, তাদের কমার (,) দিয়ে আলাদা করে দিন। |
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove();
});
});
</script>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p>এটি অন্য একটি প্যারাগ্রাফ।</p>
<button>সকল p এলিমেন্ট রিমুভ করুন</button>
</body>
</html>
ফলাফল
উদাহরণ
detach() এবং remove() এর মধ্যে পার্থক্য
detach() এবং remove() মেথডের মধ্যে পার্থক্য দেখায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#test1").click(function(){
$("body").append($("#p1").detach());
});
$("#test2").click(function(){
$("body").append($("#p2").remove());
});
$("p").click(function(){
$(this).animate({fontSize: "+=1px"})
});
});
</script>
</head>
<body>
<p id="p1">মুভ হওয়ার পরে প্যারাগ্রাফটি ক্লিক করুন - ক্লিক ইভেন্ট এখনো কাজ করবে।</p>
<p id="p2">মুভ হওয়ার পরে প্যারাগ্রাফটি ক্লিক করুন - ক্লিক ইভেন্ট এখনো কাজ করবে না।</p>
<button id="test1">p এলিমেন্ট যুক্ত করে এবং বিছিন্ন করে</button>
<button id="test2">p এলিমেন্ট যুক্ত করে এবং রিমুভ করে</button>
</body>
</html>
ফলাফল
class="test" যুক্ত সকল <p> এলিমেন্ট রিমুভ
ঐচ্ছিক প্যারামিটার ব্যবহার করে এলিমেন্ট ফিল্টার করে রিমুভ করা যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".test");
});
});
</script>
<style>
.test {
color: green;
font-size: 25px;
}
</style>
</head>
<body>
<p>এটি একটি প্যারাগ্রাফ।</p>
<p class="test">এটি অন্য একটি প্যারাগ্রাফ।</p>
<p class="test">এটি অন্য একটি প্যারাগ্রাফ।</p>
<button> class="test" দিয়ে সকল p এলিমেন্টকে সরান</button>
</body>
</html>
ফলাফল
class="test1" এবং "test2" যুক্ত সকল <p> এলিমেন্ট রিমুভ
ঐচ্ছিক প্যারামিটার ব্যবহার করে একাধিক এলিমেন্ট ফিল্টার করে রিমুভ করা যায়।
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".test1, .test2");
});
});
</script>
<style>
.test1 {
color: green;
font-size: 20px;
}
.test2 {
color: purple;
font-size: 30px;
}
</style>
</head>
<body>
<p>এটি সাধারণ একটি প্যারাগ্রাফ।</p>
<p class="test1">class="test1" যুক্ত p এলিমেন্ট।</p>
<p class="test1">class="test1" যুক্ত p এলিমেন্ট।</p>
<p class="test2">class="test2" যুক্ত p এলিমেন্ট।</p>
<button>class="test1" এবং class="test2" যুক্ত সকল p এলিমেন্টকে রিমুভ করুন</button>
</body>
</html>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ