[jQuery] jQuery empty 메소드를 활용한 페이지 요소 제거
jQuery는 웹 개발에서 많이 사용되는 JavaScript 라이브러리 중 하나로, HTML 문서의 요소를 쉽게 조작할 수 있습니다. 이 포스트에서는 jQuery의 empty 메소드를 사용하여 페이지 요소를 제거하는 방법에 대해 알아보겠습니다.
목차
jQuery empty 메소드란?
empty 메소드는 선택한 요소의 자식 요소들을 모두 제거합니다. 즉, 선택한 요소 내부의 내용을 모두 비워버립니다. 이를 통해 해당 요소를 완전히 비우고 싶을 때 유용하게 활용할 수 있습니다.
예제: 페이지 요소 제거하기
다음은 empty 메소드를 사용하여 페이지 요소를 제거하는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>jQuery empty 메소드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#removeButton").click(function(){
$("#content").empty();
});
});
</script>
</head>
<body>
<div id="content">
<h2>Hello, jQuery!</h2>
<p>This is a demo of jQuery empty method.</p>
</div>
<button id="removeButton">Remove Content</button>
</body>
</html>
위 예제에서는 content라는 id를 가진 <div> 요소 안에 제거할 내용이 포함되어 있습니다. 그리고 “Remove Content”라는 버튼이 있어 이 버튼을 클릭하면 content 요소 안의 모든 내용이 제거됩니다.
참고 자료
- jQuery 공식 문서: https://api.jquery.com/empty/
이렇게 jQuery의 empty 메소드를 사용하여 페이지 요소를 손쉽게 제거할 수 있습니다. 페이지의 동적 조작이나 상태 변화에 따른 DOM 요소 업데이트 등 다양한 상황에서 유용하게 활용할 수 있으니, 필요한 경우 언제든지 적절히 활용해보시기 바랍니다.