အနှေးကြားဖြတ်နိုင်သော စ�အုပ်အချက် ကို ဖန်တီးရန်

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 ထပ်ပေးပါ

* {
  box-sizing: border-box;
}
/* စာအုပ် အအော်အချုပ် ကို အစားအစာ ပြုပါ */
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* စာအုပ်အချက် အအော်အချုပ် ကို အစားအစာ ပြုပါ */
ul li {
  border: 1px solid #ddd;
  margin-top: -1px; /* နောက်ဘက် ဘယ်အိတ် ကို တားမြစ်ပါ */
  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;}

တတိယပိုင်း - 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';
  });
}

亲自试一试