JavaScript - JQuery(추가, 삭제)

Feb 22, 2024

Contents

추가 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>

📌

백틱을 사용하면 여러 줄에 걸친 문자열을 작성하거나, 문자열 안에 변수를 쉽게 포함할 수 있습니다. ${ }:백틱으로 감싼 문자열 내에서 변수를 포함하거나, 계산을 수행한 결과를 문자열에 삽입할 수 있다.

한번 클릭 했을 때

두번 클릭 했을 때

📌

클릭 할 때 마다 내부 박스가 1개씩 증가 된다.

제거 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>

초기 화면

삭제 했을 때

📌

박스를 클릭하면 onclick 이벤트가 발생해서 클릭된 박스가 삭제 된다.

<!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>