[자바스크립트] 16. 이벤트 종류 (삭제하기)

Apr 02, 2025


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .box {
        border: 1px solid black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>삭제하기</h1>
    <button onclick="del()">remove로 삭제하기</button>
    <div class="box" id="outerBox">
      <div class="box" id="innerBox1">내부박스1</div>
    </div>

    <script>
      function del() {
        let el = document.querySelector("#innerBox1");
        el.remove();
      }
    </script>
  </body>
</html>

.remove(): 선택된 요소를 DOM에서 삭제함.

삭제된 요소는 완전히 사라지기 때문에 다시 보이게 할 수 없음. (display: none;과는 다름)