[자바스크립트] 반복문으로 리스트 만들기 (6)

DOM 삭제하기, 반복문으로 리스트 만들기

Aug 31, 2024

Contents

DOM 삭제하기 반복문으로 리스트 만들기

DOM 삭제하기

삭제하기는 간단하다. remove();

반복문으로 리스트 만들기에서 삭제 기능을 넣을 거라, 따로 정리하지는 않음

반복문으로 리스트 만들기

이제 반복문으로 리스트를 만들어 보자.

CSR 로 만들 때, 유념해야 할 점

만들 때, id 를 넣어줘야 나중에라도 삭제 기능을 넣을 때, 삭제가 된다. 제어가 된다.

아래의 친구를 만들어줘야 삭제가 된다.

CSR 할 때는 삭제할 때, 미리 onclick 으로 걸어놔야 한다.

만들어지면서 이벤트가 바인딩됨.

1) 바닐라 자바스크립트

전체 코드

CSS 는 여기서 다루지 않겠다.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            /*3개씩 그리드 되겠군*/
            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>
        // 1. 그림그리기
        function render() { // CSR 
            let el = document.querySelector("#outerBox");
            for (let i = 1; i < 5; i++) {
                el.append(makeCard(i));
            }
        }
        // 2. DOM 만들기 
        function makeCard(id) {
            let card = document.createElement("div"); /*전체를 감싸고있는 애는 createElement 로 만들어야함*/
            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>

2) 제이쿼리

제이쿼리가 훨씬 편하다.

전체 코드


<!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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <h1>반복문으로 리스트 만들기</h1>
    <button onclick="render()">render</button>
    <div class="box" id="outerBox">
    </div>
    <script>
        // 1. 그림그리기
        function render() {
            for (let i = 1; i < 5; i++) {
                $("#outerBox").append(makeCard(i));
            }
        }
        // 2. DOM 만들기
        function makeCard(id) {
            return `<div id="card-${id}" class="card">
                        <h3>제목${id} 입니다</h3>
                        <p>내용${id} 입니다</p>
                        <button onclick="del(${id})">삭제</button>
                    </div>`;
        }
        function del(id) {
            $(`#card-${id}`).remove();
        }
    </script>
</body>

</html>

아래는 한 눈에 비교 되도록 캡쳐한 화면

바닐라~

제이쿼리~

Contents

DOM 삭제하기 반복문으로 리스트 만들기

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { display: grid; grid-template-columns: 1fr 1fr 1fr; /*3개씩 그리드 되겠군*/ 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> // 1. 그림그리기 function render() { // CSR let el = document.querySelector("#outerBox"); for (let i = 1; i < 5; i++) { el.append(makeCard(i)); } } // 2. DOM 만들기 function makeCard(id) { let card = document.createElement("div"); /*전체를 감싸고있는 애는 createElement 로 만들어야함*/ 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>

<!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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <h1>반복문으로 리스트 만들기</h1> <button onclick="render()">render</button> <div class="box" id="outerBox"> </div> <script> // 1. 그림그리기 function render() { for (let i = 1; i < 5; i++) { $("#outerBox").append(makeCard(i)); } } // 2. DOM 만들기 function makeCard(id) { return `<div id="card-${id}" class="card"> <h3>제목${id} 입니다</h3> <p>내용${id} 입니다</p> <button onclick="del(${id})">삭제</button> </div>`; } function del(id) { $(`#card-${id}`).remove(); } </script> </body> </html>