-
23. JQuery 요소 삭제하기JQuery 2022. 9. 6. 10:28
remove와 empty를 사용하여 요소를 삭제할 수 있다.
remove와 empty의 차이점은 자신을 포함한 모든 하위의 태그를 삭제할 것인가, 자신을 제외한 모든 하위의 태그를 삭제할 것인가이다.
$(…).remove() 선택한 요소와 하위 요소도 모두 삭제 $(…).empty() 선택한 요소의 하위 요소만 삭제(비워 냄) * 요소 삭제하기 예시
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>문서 제목</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <style> div.parent{ background-color: yellow; width: 400px; height: 180px; text-align: center; } div.ch1{ background-color: blue; width: 300px; height: 50px; margin: 20px auto; font-weight: 600; color: white; line-height: 45px; } div.ch2{ background-color: green; width: 300px; height: 50px; margin: 20px auto; font-weight: 600; color: white; line-height: 45px; } </style> </head> <body> <div class="parent"> <b>Parent Element</b> <div class="ch1">child element 1</div> <div class="ch2">child element 2</div> </div> <button id="remove">Remove()</button> <button id="empty">Empty()</button> </body> <script> $("#remove").on("click",function(){ $(".parent").remove(); }); $("#empty").on("click",function(){ $(".parent").empty(); }); </script> </html>'JQuery' 카테고리의 다른 글
24. JQuery 요소 크기 확인하기 (0) 2022.09.06 22. JQuery append를 사용하여 테이블에 값 추가하기 예시 - 1 (0) 2022.09.06 21. JQuery 요소 추가하기 (0) 2022.09.06 20. JQuery animate를 이용하여 요소에 이벤트 주기 예시 - 1 (0) 2022.09.06 19. JQuery 이벤트 객체를 이용하여 animate 응용 (0) 2022.09.02