3.6. আপডেট এবং রিমুভ DOM element

 

ক্লাস আপডেট করাঃ

এখন আমরা চাইলে আমাদের ইলিমেন্ট এ ক্লাস(Class) অ্যাড বা রিমুভও করতে পারবো সহজেই।

ক্লাস অ্যাড করাঃ ধরি আমরা আমাদের নতুন তৈরীকৃত newDiv এ নতুন একটা ক্লাস অ্যাড করতে চাচ্ছিঃ

newDiv.classList.add('new-div');

 

এখানে আমরা আমাদের ইলিমেন্ট এর classList নামে একটা প্রপার্টি আছে, আবার সেটার add() নামে একটা মেথড আছে। এই মেথডের কাজই হচ্ছে ক্লাস অ্যাড করা। এখন আমাদের সেই newDiv ইলিমেন্টটা দেখলেঃ
newDiv;

এখন কিছু পুরোনো ব্রাউজারে এই classList নাও সাপোর্ট করতে পারে। সেক্ষেত্রে আমরা এই টেকনিক ব্যবহার করতে পারিঃ

newDiv.className += ' old-new-div';

 

আমরা এখানে যেটা করেছি সেটা আসলে আগের কোনো ক্লাস থাকলে সেটার সাথে নতুন আরেকটা ক্লাস নেইম লাগাবে। আর এজন্যে একটু সতর্ক হতে হবে। যার জন্যে আমরা আগেরটা যাতে মুছে না যায় সেজন্যে += দিয়েছি এবং ভালো করে খেয়াল করলে দেখবেন আমাদের ক্লাস নেইম old-new-div এর আগে একটা স্পেসও আছে, যাতে আগেরটার সাথে না লাগে। পৃথক পৃথক দুইটা ক্লাস নেইম তৈরী হবে এভাবেঃ
newDiv

এখানে আমাদের ব্যবহার করা classList প্রপার্টি দিয়ে কিন্তু আমাদের ইলিমেন্ট এ কয়টা ক্লাস আছে সেটা সহজেই দেখতে পারবোঃ
newDiv.classList;
এটা অ্যারে আকারে ক্লাসের নেইমগুলো স্টোর করেঃ

আর এটার মেথডও আছে ক্লাস অ্যাড করার জন্যে যেটা আমরা দেখেছি। তেমনি এটার ক্লাস রিমুভ করার জন্যেও মেথড আছে।

ক্লাস রিমুভ করাঃ

 

এখন আমরা চাইলে ক্লাস রিমুভও করে ফেলতে পারবো সহজেই। সেজন্যে আমাদের classList এরই remove() নামে মেথড আছেঃ

newDiv.classList.remove('new-div');

এখন আমরা আমাদের ইলিমেন্টটা দেখলেঃ
newDiv;

আমাদের ইলিমেন্ট থেকে new-div নামের ক্লাসটা চলে গেছেঃ

এখন সেইমভাবে পুরোনো কিছু ব্রাউজারে আমাদের classList কাজ না করায় আমাদের একটু টেকনিক খাটিয়ে কাজ করতে হবে। ধরি আমরা আমাদের ইলিমেন্ট এর আরেকটা ক্লাস যেটা আছে সেটা রিমুভ করতে চাচ্ছিঃ

newDiv.className = newDiv.className.replace(/old-new-div$/, ' ');

 

এখানে আমরা newDiv এর className টা মডিফাই করেছি একটু। আমাদের কাঙ্খিত ক্লাস নেইমকে রেগুলার এক্সপ্রেশনের সাহায্যে খালি ব্ল্যাঙ্ক স্পেস দিয়ে রিপ্লেস করে সেটাকে আবার newDiv এর className এ অ্যাসাইন করে দিয়েছি। এবার newDiv কে আবার দেখলেঃ