DOM 노드 삭제를 위한 empty()의 기본 사용법
페이지에서 노드를 제거하는 것은 개발자에게 일반적인 작업입니다. jQuery는 이 문제를 해결하기 위한 여러 가지 방법을 제공합니다. 여기서는 빈 메서드를 자세히 살펴보겠습니다.
empty 이름에서 알 수 있듯이 빈 메서드는 약간 다릅니다. 삭제 지정된 요소의 모든 하위 노드만 제거하기 때문에 동일합니다.
이 방법은 하위 요소(및 기타 하위 요소)를 제거할 뿐만 아니라 요소 내의 텍스트도 제거합니다. 설명에 따르면 요소의 모든 텍스트 문자열은 요소의 하위 노드로 간주되기 때문입니다.
아래에 분석 예시를 작성해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
div {
background: #bbffaa;
width: 300px;
}
</style>
</head>
<body>
<div id="div">
<p>p元素1</p>
<p>p元素2</p>
</div>
<button>点击通过jQuery的empty移除元素</button>
<script type="text/javascript">
$("button").on('click', function() {
//通过empty移除了当前div元素下的所有p元素
//但是本身id=test的div元素没有被删除
$("#div").empty()
})
</script>
</body>
</html>브라우저를 사용하여 이 코드를 열고 실행하면 F12를 누릅니다. 다음 <div id="div"></div>
