কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে DOM নোডের সব চাইল্ড এলিমেন্ট রিমুভ করা

চাইল্ড এলিমেন্ট রিমুভ করতে innerHTML কে খালি স্ট্রিং ('') সেট করুন।

উদাহরণ

নিচে কোডটি দেওয়া হলো:

<!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title> </head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <body> <div id='removeAllChildElements' style="height: 200px; width: 200px; border: 1px solid red;"> <span>Javascript</span> <div>MySQL</div> </div> <button id='remove'>Remove the items</button> </body> <script>    remove.onclick = () => {       const element = document.getElementById("removeAllChildElements");       element.innerHTML = '';    } </script> </html>

প্রোগ্রামটি চালানোর জন্য, ফাইলটি যেকোনো নাম দিয়ে সংরক্ষণ করুন (যেমন: index.html)। ফাইলে ডান ক্লিক করে VS Code এডিটরে Open with live server অপশনটি নির্বাচন করুন।

আউটপুট

এটি নিচের আউটপুটটি দেবে:

জাভাস্ক্রিপ্টে DOM নোডের সব চাইল্ড এলিমেন্ট রিমুভ করা

এখন "Remove the items" বাটনে ক্লিক করলে বক্সের ভিতরের সব এলিমেন্ট রিমুভ হয়ে যাবে।

আউটপুট

এটি নিচের আউটপুটটি দেবে:

জাভাস্ক্রিপ্টে DOM নোডের সব চাইল্ড এলিমেন্ট রিমুভ করা

  1. জাভাস্ক্রিপ্টে ডাইনামিক এলিমেন্টে ইভেন্ট जोড়া করা

  2. জাভাস্ক্রিপ্টে চাইল্ড নোড কাউন্ট বের করা

  3. জাভাস্ক্রিপ্টে ID দিয়ে এলিমেন্ট রিমুভ করা

  4. HTML DOM Select remove() মেথড