요소의 삭제 .remove() .detach() .empty() .unwrap()

편집일시: 2018-07-05 01:20 조회수: 22736 댓글수: 0
## 요소의 삭제 다음 메소드를 사용하면 선택한 요소나 콘텐츠를 삭제할 수 있다. | 메소드 | 설명 | | --- | --- | | .remove() | 선택한 요소를 DOM 트리에서 삭제한다. 삭제된 요소와 연관된 jQuery 데이터나 이벤트도 같이 삭제된다 | | .detach() | 선택한 요소를 DOM 트리에서 삭제한다. (삭제된 요소와 연관된 jQuery 데이터나 이벤트는 유지된다. | | .empty() | 선택한 요소의 자식 요소를 모두 삭제한다. | | .unwrap() | 선택한 요소의 부모 요소를 삭제한다. | ## .remove() 메소드 `.remove()` 메소드는 선택한 HTML 요소를 DOM 트리에서 삭제한다. 이때 삭제되는 요소와 연관된 jQuery 데이터나 이벤트도 모두 함께 삭제된다. 아래와 같이 HTML 요소가 있을 때, ```html <p id="one">안녕하세요.</p> <p id="two">devkuma입니다.</p> <p id="three">반갑습니다.</p> ``` `<p> 요소 중에 id가 one, two인 요소를 삭제한다. ```javascript $("p").remove("#one, #two"); ``` [코드 실행](/codes/72) ## .detach() 메소드 `.detach()` 메소드는 선택한 요소를 DOM 트리에서 삭제한다. 이때 삭제되는 요소와 연관된 jQuery 데이터나 이벤트는 삭제되지 않고, 계속 유지된다. `.detach()` 메소드가 반환하는 jQuery 객체를 `.append()`나 `.prepend()`와 같은 메소드에 인수로 전달하면 삭제한 요소를 다시 복구할 수도 있다. 아래와 같이 HTML 요소가 있을 때, ```html <p class="hello">안녕하세요.</p> <p>devkuma입니다.</p> <p class="hello">반갑습니다.</p> ``` class가 hello인 HTML 요소를 삭제했다가 다시 복구를 하여도 click 이벤트가 사라지 않는 걸 확인할 수 있다. ```javascript $("p").on("click", function() { $(this).toggleClass("wrap"); }); var data = null; $("#btnDetach").on("click", function() { data = $(".hello").detach(); // class가 "hello"인 요소를 모두 삭제한다. }); $("#btnRestore").on("click", function() { $("p").after(data); // detach() 메소드로 삭제되었던 모든 요소를 다시 추가한다. }); ``` [코드 실행](/codes/73) ## .empty() 메소드 `.empty()` 메소드는 선택한 요소의 자식 요소를 모두 삭제한다. 이때 `.remove()`나 `.detach()` 메소드와는 달리 선택된 요소 그 자체는 삭제되지 않는다. 아래와 같이 HTML 요소가 있을 때, ``` <div id="container" class="wrap"> <div>안녕하세요</div> <div>devkuma입니다.</div> <div>반갑습니다.</div> </div> ``` class가 container인 자식 HTML 요소 모두 삭제한다. ```javascript $("#container").empty(); // id가 "hello"인 요소의 자식 요소를 모두 삭제함. ``` [코드 실행](/codes/74) ## .unwrap() 메소드 `.unwrap()` 메소드는 선택한 요소의 부모 요소를 삭제한다. 아래와 같이 HTML 요소가 있을 때, ``` <div id="container" class="wrap"> <p>안녕하세요</p> <p>devkuma입니다.</p> <p>반갑습니다.</p> </div> ``` ```javascript $("p").unwrap(); // <p> 요소의 부모 요소를 삭제한다. ``` [코드 실행](/codes/75)