জাভাস্ক্রিপ্টের সাহায্যে বোতামে ক্লিকে নাম যোগ এবং অপসারণ কিভাবে করবেন?

তৈরি করতে, add() পদ্ধতি ব্যবহার করুন, যেখানে তৈরি করা এবং সংযুক্ত উপাদান মুছে ফেলার জন্য, আপনি সরান() ব্যবহার করতে পারেন। নিম্নলিখিত কোড -

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/
4.7.0/css/font-awesome.min.css">
<style>
</style>
</head>
<body>
<div class="">
<ul id="listOfName"></ul>
</div>
<div class="">
<h1 class="">Add A New Name</h1>
<div class="">
<input type="text" id="name" placeholder="Add Name......">
<button class="btn" id="addNameButton">AddName</button>
</div>
</div>
</div>
<script>
   var givenName = document.querySelector('#name')
   var btnClass = document.querySelector('#addNameButton')
   var listOfName = document.querySelector('#listOfName')
   btnClass.addEventListener('click', () => {
      var actualName = givenName.value
      if (actualName.length != 0) {
         var createAnHTMLList = `<li class=""><div>${actualName}</div><button
         onclick="removeNameFromTheList(this)">Remove Name</button>`
         listOfName.innerHTML += createAnHTMLList
         givenName.value = ''
         givenName.classList.remove('red')
      } else{
         givenName.classList.add('red')
      }
   })
   function removeNameFromTheList(e) {
      e.parentElement.remove()
   }
</script>
</body>
</html>

উপরের প্রোগ্রামটি চালানোর জন্য, ফাইলের নাম "anyName.html(index.html)" সংরক্ষণ করুন এবং ফাইলটিতে ডান ক্লিক করুন। ভিএস কোড এডিটরে "লাইভ সার্ভারের সাথে খুলুন" বিকল্পটি নির্বাচন করুন৷

৷