[jQuery] jQuery empty 메소드를 사용하여 특정 id의 자식 요소 삭제

22 Dec 2023

jQuery

jQuery는 HTML 문서의 요소들을 조작하는 데 유용한 다양한 메소드를 제공합니다. 그 중 empty 메소드는 선택한 요소의 자식 요소들을 모두 제거하는 데 사용됩니다.

이 메소드를 사용하면 특정 id를 가진 요소의 자식 요소들을 간단하게 삭제할 수 있습니다.

1. jQuery Library 임포트

먼저, HTML 문서에 jQuery 라이브러리를 임포트해야 합니다. 다음은 jQuery CDN을 통해 라이브러리를 임포트하는 예시입니다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. empty 메소드 사용

다음은 특정 id의 자식 요소를 삭제하는 예시 코드입니다.

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#parentElement").empty();
});
</script>
</head>
<body>

<div id="parentElement">
  <p>Hello <span>world</span>!</p>
</div>

</body>
</html>

위 코드에서 #parentElement는 삭제할 자식 요소들을 포함하고 있는 부모 요소의 id를 가리킵니다. empty 메소드를 호출하면 해당 요소의 자식 요소들이 모두 제거됩니다.

결론

jQuery의 empty 메소드를 사용하면 간단하게 특정 id의 자식 요소를 삭제할 수 있습니다. 이를 통해 웹 페이지의 동적 요소 조작이 용이해지며, 코드를 간결하게 유지할 수 있습니다.

참고 자료:
jQuery 공식 문서 - empty 메소드