কম্পিউটার

জাভাস্ক্রিপ্ট দিয়ে তালিকা আইটেমগুলি কীভাবে বন্ধ করবেন?


জাভাস্ক্রিপ্টের সাথে তালিকা আইটেমগুলি বন্ধ করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   * {
      box-sizing: border-box;
   }
   ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
   }
   ul li {
      border: 1px solid rgb(221, 221, 221);
      background-color: #5a5cec;
      color: white;
      padding: 12px;
      text-decoration: none;
      font-size: 18px;
      display: block;
      position: relative;
      font-weight: 500;
   }
   ul li:hover {
      background-color: rgb(43, 0, 145);
   }
   .close {
      cursor: pointer;
      position: absolute;
      top: 50%;
      right: 0%;
      padding: 12px 16px;
      transform: translate(0%, -50%);
   }
   .close:hover {
      background: red;
   }
</style>
</head>
<body>
<h1>Closable List Items Example</h1>
<h2>Click 'x' on the list items to close them</h2>
<ul>
<li>Cat<span class="close">×</span></li>
<li>Lion<span class="close">×</span></li>
<li>Tiger<span class="close">×</span></li>
<li>Leopard<span class="close">×</span></li>
<li>Cheetah<span class="close">×</span></li>
</ul>
<script>
   var closebtns = document.querySelectorAll(".close");
   Array.from(closebtns).forEach(item => {
      item.addEventListener("click", () => {
         item.parentElement.style.display = "none";
      });
   });
</script>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

জাভাস্ক্রিপ্ট দিয়ে তালিকা আইটেমগুলি কীভাবে বন্ধ করবেন?

কিছু আইটেম-

-এ 'x'-এ ক্লিক করলে

জাভাস্ক্রিপ্ট দিয়ে তালিকা আইটেমগুলি কীভাবে বন্ধ করবেন?


  1. কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি ফিল্টার তালিকা তৈরি করবেন?

  2. কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি স্বয়ংসম্পূর্ণ তৈরি করবেন?

  3. কিভাবে CSS এবং JavaScript দিয়ে একটি করণীয় তালিকা তৈরি করবেন?

  4. কিভাবে জাভাস্ক্রিপ্ট দিয়ে টেক্সট টগল করবেন?