Cara Menutup Item List Pada Sebuah Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita akan mempelajari cara menutup item daftar dengan JavaScript.

Tutup List Item

Klik pada simbol “x” di sebelah kanan item daftar untuk menutup / menyembunyikannya.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Mencegah border ganda */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  position: relative;
}

ul li:hover {
  background-color: #eee;
}

.close {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
}

.close:hover {background: #bbb;}
</style>
</head>
<body>

<h2> Tutup List Item </h2>
<p> Klik pada simbol "x" di sebelah kanan item daftar untuk menutup / menyembunyikannya. </p>

<ul>
  <li>Sehila</li>
  <li>Yura<span class="close">&times;</span></li>

  <li>Amanda<span class="close">&times;</span></li>
  <li>Evan<span class="close">&times;</span></li>

  <li>Christine<span class="close">&times;</span></li>
  <li>Yonna<span class="close">&times;</span></li>
  <li>Hyoyeon</li>
</ul>

<script>
var closebtns = document.getElementsByClassName("close");
var i;

for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}
</script>

</body>
</html>

Cara Membuat Tutup List Item

Langkah 1) Tambahkan HTML:
Contoh

<ul>
  <li>Sehila</li>
  <li>Yura<span class="close">&times;</span></li>

  <li>Amanda<span class="close">&times;</span></li>
  <li>Evan<span class="close">&times;</span></li>

  <li>Christine<span class="close">&times;</span></li>
  <li>Yonna<span class="close">&times;</span></li>
  <li>Hyoyeon</li>
</ul>

Langkah 2) Tambahkan CSS:
Contoh

* {
  box-sizing: border-box;
}

/* Style pada daftar (hapus margin dan poin, etc) */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* Style utnuk list items */
ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Mencegah border ganda */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  position: relative;
}

/* Tambahkan background warna abu-abu terang saat mengarahkan kursor*/
ul li:hover {
  background-color: #eee;
}

/* Style untuk button close  (span) */
.close {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
}

.close:hover {background: #bbb;}

Langkah 3) Tambahkan JavaScript:
Contoh

/* Dapatkan semua elemen dengan class = "close" */
var closebtns = document.getElementsByClassName("close");
var i;

/* Ulangi elemen, dan sembunyikan induknya, saat diklik*/
for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
  this.parentElement.style.display = 'none';
});