เพิ่ม/ลบชื่อในรายการด้วยปุ่มกดใน JavaScript (Vanilla JS)

สร้าง UI เพิ่ม/ลบรายการชื่อแบบไดนามิก

ใช้ addEventListener ผูกปุ่มเพิ่ม สร้าง <li> พร้อมปุ่มลบแต่ละรายการ

ตัวอย่างโค้ดเต็ม

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Add/Remove Names</title>
  <style>
    .red { border-color: red; }
    li { display: flex; justify-content: space-between; align-items: center; margin: 5px 0; }
  </style>
</head>
<body>
  <div>
    <ul id="listOfName"></ul>
  </div>
  <div>
    <h1>Add A New Name</h1>
    <input type="text" id="name" placeholder="Add Name......">
    <button id="addNameButton">Add Name</button>
  </div>

  <script>
    const givenName = document.querySelector('#name');
    const btnClass = document.querySelector('#addNameButton');
    const listOfName = document.querySelector('#listOfName');

    btnClass.addEventListener('click', () => {
      const actualName = givenName.value.trim();
      
      if (actualName.length !== 0) {
        const html = `
          <li>
            <div>${actualName}</div>
            <button onclick="removeNameFromTheList(this)">Remove Name</button>
          </li>
        `;
        listOfName.innerHTML += html;
        givenName.value = '';
        givenName.classList.remove('red');
      } else {
        givenName.classList.add('red');
      }
    });

    function removeNameFromTheList(btn) {
      btn.parentElement.remove();
    }
  </script>
</body>
</html>

วิธีรัน

บันทึกเป็น index.html แล้วเปิดด้วย Live Server

คำอธิบาย

• ปุ่มเพิ่ม: อ่านค่า input → สร้าง HTML string → innerHTML += เพิ่มในรายการ
• ปุ่มลบ: ส่ง this (ปุ่มตัวเอง) ไปหา parent <li> แล้ว .remove()
• Validation: ตรวจสอบค่าว่าง ใส่ class .red แสดง error

แนวทางปลอดภัยกว่า: ใช้ createElement แทน innerHTML

btnClass.addEventListener('click', () => {
  const name = givenName.value.trim();
  if (!name) return givenName.classList.add('red');
  
  const li = document.createElement('li');
  li.innerHTML = `
${name}
`;
  
  const removeBtn = document.createElement('button');
  removeBtn.textContent = 'Remove Name';
  removeBtn.onclick = () => li.remove();
  
  li.appendChild(removeBtn);
  listOfName.appendChild(li);
  givenName.value = '';
});