Hvordan oprette: Kan lukkes liste elementer

Lær hvordan man bruger JavaScript til at lukke liste elementer.

Hvordan oprette en kan lukkes liste element

Første trin - Tilføj 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>

Andet trin - Tilføj CSS:

* {
  box-sizing: border-box;
}
/* Indstil liste-stilen (fjern margen og punkttegn osv.) */
ul {
  listestyletype: ingen;
  padding: 0;
  marg: 0;
}
/* Indstil stilen for listeemner */
ul li {
  ramme: 1px solid #ddd;
  margotop: -1px; /* Forhindrer dobbelt ramme */
  baggrundsfarve: #f6f6f6;
  padding: 12px;
  tekstdekorering: ingen;
  fontstørrelse: 18px;
  farve: sort;
  display: blok;
  position: relativ;
}
/* Tilføj lysgrå baggrundsfarve ved museoverførsel */
ul li:hover {
  baggrundsfarve: #eee;
}
/* Indstil stilen for lukkeknappen (span) */
.close {
  pointer: pointer;
  position: absolut;
  øverst: 50%;
  højre: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
}
.close:hover {background: #bbb;}

Tredje trin - Tilføj JavaScript:

// Få alle elementer med class="close"
var closebtns = document.getElementsByClassName("close");
var i;
// Gennemgå elementer og gem parent-elementet ved klik
for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}

Prøv det selv