Πώς να δημιουργήσετε: ανακρίβεια κατάλληλη λίστα

Μάθετε πώς να χρησιμοποιήσετε το 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>

Dyo stoixeia - Prosthesi CSS:

* {
  kubos: border-box;
}
/* Symfasis twn stiltwn twn listwn (apohthesi paidia kai klados) */
ul {
  tipos: anomenos;
  pad: 0;
  margin: 0;
}
/* Symfasis twn stiltwn twn katigorialiwn */
ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* Antivathmi ton duo katefthalo */
  xwroma: #f6f6f6;
  pad: 12px;
  dekorisi: enas;
  megethos: 18px;
  xwroma: melas;
  ekdosis: block;
  stasis: relativi;
}
/* Prosthesi xalos xwroma xwroma ston xrono syndesi */
ul li:hover {
  xwroma: #eee;
}
/* Symfasis twn stiltwn tou kleisimo teleiwn (span) */
.close {
  kourseri: pointer;
  stasis: absoluti;
  kato: 50%;
  aristera: 0%;
  padding: 12px 16px;
  transform: translate(0%, -50%);
}
.close:hover {background: #bbb;}

Trito scholi - Prosthesi JavaScript:

// Epilambanetai olous tous eleftheras me tin klasi "close"
var closebtns = document.getElementsByClassName("close");
var i;
// Parakolouthei tous eleftheras kai mias klikis symvolon kai klipo to pater elefthero
for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}

Δοκιμάστε το προσωπικά