[자바스크립트] 17. 이벤트 종류 (반복문으로 리스트 만들기)

Apr 02, 2025


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        border: 1px solid black;
        padding: 10px;
      }

      .card {
        border: 1px solid lightgray;
        box-shadow: 0 4px 4px 0 grey;
        padding: 10px;
        margin: 5px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>반복문으로 리스트 만들기</h1>
    <button onclick="render()">render</button>
    <div class="box" id="outerBox"></div>

    <script>
      let id = 1;
      function render() {
        let el = document.querySelector("#outerBox");
        // for (let i = 1; i < 5; i++) {

        // }
        el.append(makeCard(id));
        id++;
      }

      function makeCard(id) {
        let card = document.createElement("div");
        card.setAttribute("class", "card");
        card.setAttribute("id", "card-" + id);

        card.innerHTML = `
                <h3>제목${id} 입니다</h3>
                <p>내용${id} 입니다</p>
                <button onclick="del(${id})">삭제</button>
            `;
        return card;
      }
      function del(id) {
        let el = document.querySelector("#card-" + id);
        el.remove();
      }
    </script>
  </body>
</html>

1. render() 함수

render 버튼 클릭 시 호출됨.

makeCard() 함수로 새로운 카드를 만들어서 .append()로 #outerBox에 추가.

id는 전역 변수로, 클릭할 때마다 1씩 증가해서 카드별로 고유 ID가 생김.

2. makeCard(id) 함수

새로운 <div> 요소를 만들어 카드로 변환.

innerHTML로 제목, 내용, 삭제 버튼을 포함함.

카드 ID를 card-${id} 형식으로 설정.

3. del(id) 함수

삭제 버튼을 클릭하면 호출됨.

document.querySelector()로 해당 카드(card-${id})를 찾고 .remove()로 삭제.