[JavaScript] 텍스트 필드에 입력한 값을 화면에 추가하고 삭제하기 (투두리스트)

728x90

✅ 목표

텍스트 필드 값에 값을 입력하면 아래 li에 내용이 추가된다.
추가된 li를 클릭하면 '삭제하시겠습니까?' confrim 창이 뜨고 '확인'을 누르면 삭제된다.

#appendChild #createTextNode # createElement #이벤트위임

✅ Html

<body>
  <h1>Web Programming</h1>
  <p>공부할 주제를 기록해 보세요</p>

      <label for="input">주제</label>
      <input id="input" type="text" autofocus>
      <button class="button">추가</button>

    <hr>

    <ul class="itemList">
      <li>추가할게요</li>
    </ul>
</body>

label의 for과 input의 id를 맞춰줍니다.

label의 for 속성은 해당 레이블이 어떤 입력 요소와 연결되어 있는지 알려줍니다.

사용자가 label을 클릭하면 해당 입력 필드에 포커스가 가게 됩니다.

때문에 특히 모바일 기기에서 입력 필드보다 레이블을 클릭하여 사용자가 입력하기 더 편리해집니다.

label에 for을 사용한다면 입력 요소의 id와 동일하게 맞춰야 합니다.

✅ JavaScript - 텍스트 입력값을 li에 추가

<script>
    const button = document.querySelector('.button');
    const input = document.querySelector('#input');
    const itemList = document.querySelector(".itemList");

    document.addEventListener('DOMContentLoaded', function(){
        
      button.addEventListener('click', function(e){
          e.preventDefault();
          
          var msg = input.value;
          if(msg !== ""){
            newRegister(msg);
            
            // 입력 후 텍스트 필드 값을 비워줌
            input.value = "";
          }
        });

    });

    function newRegister(msg){
      // 요소를 만들고
      const newItem = document.createElement('li');
      // 요소에 text 추가
      const newText= document.createTextNode(msg);

      // 요소에 텍스트를 넣어주고
      newItem.appendChild(newText);

      // 전체 리스트에 완성된 li를 넣어준다
      itemList.appendChild(newItem);
    }
    
  </script>

엔터 혹은 '추가' 버튼을 누르면
텍스트 필드에 입력 받은 값을 아래 li의 맨 아래부터 추가됩니다

순서가 중요합니다.

1. 요소를 만들고

새로운 'li'를 추가하기 위해 createElement 합니다.

const newItem = document.createElement('li');

2. text를 만들고

새로운 TextNode를 만들기 위해 msg의 값으로 textNode를 만듭니다.

const newText= document.createTextNode(msg);

3. 요소에 text를 넣고

새롭게 만든 'li'에 msg 값인 textNode를 추가합니다.

newItem.appendChild(newText);

4. 전체 리스트에 요소를 넣는다.

최상단 ul (전체 리스트) 에 완성된 li를 넣어줍니다.

itemList.appendChild(newItem);

✅ JavaScript - li를 클릭해서 삭제하기

이제 추가된 li를 클릭하면 삭제가 됩니다.

그렇다면 각각의 li에 모두 리스너를 달아야 할까요?

li가 아주 많아진다면 어렵습니다.

이럴 때 '이벤트 위임'을 사용합니다.

💡 이벤트 위임 💡

이벤트 위임이란 부모 요소에 이벤트 리스너 하나만 추가하고 모든 자식 요소의 이벤트를 처리하는 방법입니다.

실제로 이벤트가 발생한 대상이 event 객체의 target 프로퍼티 (event.target)인지 확인하면 됩니다.

itemList.addEventListener('click', (e) => {
          if(e.target.tagName === 'LI'){
            if(confirm("삭제하시겠습니까?")){
              e.target.remove();
            };
          }
        });

전체 리스트인 ul itemList를 클릭한 후
클릭한 타겟의 tagName이 'LI'인지 확인합니다.

이때 태그 이름은 대문자를 사용합니다.

이후, confrim 창에서 반환 값이 true 즉, 확인을 눌렀다면 해당 target을 삭제해주면 됩니다.

✅ 전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>입력값 밑에 추가하기</title>

  <style>
    input{
      border-radius: 5px;
    }

    button{
      border-radius: 5px;
      font-size: 1.1em;
    }
  </style>

</head>
<body>
  <h1>Web Programming</h1>
  <p>공부할 주제를 기록해 보세요</p>

      <label for="input">주제</label>
      <input id="input" type="text" autofocus>
      <button class="button">추가</button>

    <hr>

    <ul class="itemList">
      <li>추가할게요</li>
    </ul>


  <script>
    const button = document.querySelector('.button');
    const input = document.querySelector('#input');
    const itemList = document.querySelector(".itemList");

    document.addEventListener('DOMContentLoaded', function(){
        
      button.addEventListener('click', function(e){
          e.preventDefault();
          
          var msg = input.value;
          if(msg !== ""){
            newRegister(msg);
            input.value = "";
          }
        });

        itemList.addEventListener('click', (e) => {
          if(e.target.tagName === 'LI'){
            if(confirm("삭제하시겠습니까?")){
              e.target.remove();
            };
          }
        });


    });

    function newRegister(msg){
      // 요소를 만들고
      const newItem = document.createElement('li');
      // 요소에 text 추가
      const newText= document.createTextNode(msg);

      // 요소에 텍스트를 넣어주고
      newItem.appendChild(newText);

      // 전체 리스트에 완성된 li를 넣어준다
      itemList.appendChild(newItem);
    }
    
  </script>
</body>
</html>

728x90

✅ 목표

✅ Html

✅ JavaScript - 텍스트 입력값을 li에 추가

1. 요소를 만들고

2. text를 만들고

3. 요소에 text를 넣고

4. 전체 리스트에 요소를 넣는다.

✅ JavaScript - li를 클릭해서 삭제하기

💡 이벤트 위임 💡

✅ 전체 코드

티스토리툴바