چگونه ایجاد می‌شود: آیتم‌های لیست قابل بستن

آموزش نحوه بستن آیتم‌های لیست با استفاده از JavaScript

چگونه آیتم‌های لیست قابل بستن ایجاد کنیم

قدم اول - اضافه کردن HTML:

<ul>
  <li>Adele</li>
  <li>Agnes<span class="close">x</span></li>
  <li>Billy<span class="close">x</span></li>
  <li>Bob<span class="close">x</span></li>
  <li>Calvin<span class="close">x</span></li>
  <li>Christina<span class="close">x</span></li>
  <li>Cindy</li>
</ul>

مرحله دوم - اضافه کردن CSS:

* {
  حجم‌دهی: border-box;
}
/* تنظیم استایل لیست (حذف حاشیه‌ها و نقاط و غیره) */
ul {
  نوع فهرست: none;
  پادگی: 0;
  مقیاس: 0;
}
/* تنظیم استایل عناصر لیست */
ul li {
  لبه: 1px خطی #ddd;
  مقیاس بالا: -1px; /* جلوگیری از لبه‌های دوطرفه */
  رنگ پس‌زمینه: #f6f6f6;
  پادگی: 12px;
  زیرخط: none;
  اندازه‌ی فونت: 18px;
  رنگ: سیاه;
  نمایش: block;
  موقعیت: نسبی;
}
/* در زمان قرارگیری موس بر روی آن‌ها رنگ پس‌زمینه خاکستری روشن اضافه می‌شود */
ul li:hover {
  رنگ پس‌زمینه: #eee;
}
/* تنظیم استایل دکمه‌های بستن (span) */
.close {
  مگسور: pointer;
  موقعیت: تعاملی;
  بالا: 50%;
  راست: 0%;
  پادگی: 12px 16px;
  ترجمه: translate(0%, -50%);
}
.close:hover {background: #bbb;}

مرحله سوم - اضافه کردن JavaScript:

// همه عناصر با class="close" را دریافت می‌کند
var closebtns = document.getElementsByClassName("close");
var i;
// طی‌دهی عناصر و در کلیک بر روی آن‌ها پدر عناصر را مخفی کردن
for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}

آزمایش کنید