জেকুয়েরি removeClass() মেথড
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ
সংজ্ঞা এবং ব্যবহার
removeClass() মেথড নির্বাচিত এলিমেন্টের এক বা একাদিক ক্লাস নাম রিমুভ করে।
নোট: যদি কোন প্যারামিটার উল্লেখ করা না থাকে, এই মেথড নির্বাচিত এলিমেন্ট থেকে সকল ক্লাস নাম রিমুভ করে।
সিনট্যাক্স ও ব্যাখ্যা
$(selector).removeClass(classname,function(index,currentclass))
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে removeClass() মেথডে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিররণ |
|---|---|
classname |
ঐচ্ছিক। যেই এক বা একাদিক ক্লাস রিমুভ করা হবে সেটিকে নির্দেশ করে। একাধক ক্লাস রিমুভ করতে, স্পেস দিয়ে ক্লাস নাম আলাদা করুন। নোট: যদি এই প্যারামিটার খালি হয় তাহলে সকল ক্লাস নাম রিমুভ হতে পারে। |
function(index,currentclass) |
ঐচ্ছিক। একটি ফাংশন উল্লেখ করে, যা এক বা একাদিক ক্লাস নাম রিমুভ করে।
|
উদাহরণ
<!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").removeClass("test");
});
});
</script>
<style>
.test {
font-size: 120%;
color: green;
}
</style>
</head>
<body>
<h3>এটি হেডিং</h3>
<p class="test">এটি একটি প্যারাগ্রাফ।</p>
<p class="test">এটি অন্য আরেকটি প্যারাগ্রাফ।</p>
<button>সকল p এলিমেন্ট থেকে "test" ক্লাস রিমুভ করুন</button>
</body>
</html>
ফলাফল
উদাহরণ
একটি এলিমেন্টের ক্লাস নাম পরিবর্তন
একটি ক্লাস নাম রিমুভ এবং একটি নতুন ক্লাস নাম যুক্ত করতে কিভাবে addClass() এবং removeClass() ব্যবহার করা হয়।
উদাহরণ
<!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:first").removeClass("test").addClass("main");
});
});
</script>
<style>
.test {
color: purple;
}
.main {
background-color: green;
color: white;
}
</style>
</head>
<body>
<h3>এটি হেডিং</h3>
<p class="test">এটি একটি প্যারাগ্রাফ।</p>
<p>এটিও প্যারাগ্রাফ।</p>
<button>প্রথম p এলিমেন্টের ক্লাসনাম পরিবর্তন করার জন্য এখানে ক্লিক করুন</button>
</body>
</html>
ফলাফল
ফাংশন ব্যবহার করে ক্লাস রিমুভ
নির্বাচিত এলিমেন্ট থেকে একটি ক্লাস রিমুভ করতে ফাংশন ব্যবহার।
উদাহরণ
<!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(){
$("li").removeClass(function(n) {
if (n==0||n==1) {return "listitem"}
else {return ""}
});
});
});
</script>
<style>
.listitem {
color:green;
}
</style>
</head>
<body>
<h3>এটি হেডিং</h3>
<ul>
<li class="listitem">Tiger</li>
<li class="listitem">Lion</li>
<li class="listitem">Elephant</li>
</ul>
<button>ইন্ডেক্স ০ ও ১ সহ li এলিমেন্ট "listitem" হতে রিমুভ করুন</button>
</body>
</html>
ফলাফল
একদিক ক্লাস নাম রিমুভ
নির্বাচিত এলিমেন্ট থেকে কিভাবে একদিক ক্লাস নাম রিমুভ করা হয়।
উদাহরণ
<!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, h1").removeClass("head test main");
});
});
</script>
<style>
.head {
font-size: 2em;
color: green;
}
.test {
font-size: 120%;
color: purple;
}
.main {
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<h1 class="head">এটি একটি হেডিং</h1>
<p class="test">ঙ্গেটি একটি প্যারাগ্রাফ।</p>
<p class="main">এটি আরেকটি প্যারাগ্রাফ।</p>
<button>নির্বাচিত এলিমেন্ট থেকে "head", "test" and "main" ক্লাসগুলো রিমুভ করুন</button>
</body>
</html>
ফলাফল
« জেকুয়েরি এইচটিএমএল/সিএসএস মেথডসমূহ