자바스크립트 문법 - JQuery 추가, 삭제

Feb 28, 2024

Contents

1. 추가 append()


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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <style>
        .box {
            margin-bottom: 3px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>추가하기</h1>
    <button onclick="addAppend()">append로 추가하기</button>
    <div class="box" id="outerBox">
    </div>
    <script>
        let n = 0;
        function addAppend() {
            n++;
            let newString = `<div onclick="del(${n})" class="box" id="innerBox${n}">내부박스${n}</div>`;
            $("#outerBox").append(newString);
        }

    </script>
</body>

</html>

💡

백틱(` `) 을 사용하면 문자열에 변수를 포함시킬 수 있다. ${} 을 사용해 변수를 포함시킨다.

append 를 하면 아우터박스에 새로운 내부박스가 번호 순서대로 만들어진다.

2. 제거 remove()


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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <style>
        .box {
            margin-bottom: 3px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>추가하기</h1>
    <button onclick="addAppend()">append로 추가하기</button>
    <div class="box" id="outerBox">
    </div>
    <script>
        let n = 0;
        function addAppend() {
            n++;

            let newString = `<div onclick="del(${n})" class="box" id="innerBox${n}">내부박스${n}</div>`;
            $("#outerBox").append(newString);

        }

        function del(n) {
            $(`#innerBox${n}`).remove();
        }

    </script>
</body>

</html>

삭제를 위해 del 함수를 추가한다. del 함수는 remove() 메서드를 가지고 있다

내부박스를 누르면 박스가 삭제된다.

💡

삭제는 <div id=””> 를 사용하는 것보다 <div onclick=””> 를 사용하는 것이 좋다. onclick을 사용하면 <div onclick="del(${n})”> 처럼 div 내에서 삭제 메서드를 호출할 수 있지만, <div id=””> 를 사용하면 del 메서드를 별도로 호출해야 하기 때문에 불편함이 있다.