Remove는 공백과 마찬가지로 요소를 제거하는 방법이지만 제거는 요소 자체와 요소와 관련된 바인딩된 이벤트 및 jQuery 데이터를 포함하여 요소 내부의 모든 것을 제거합니다.
예를 들어 노드의 경우 클릭 이벤트를 바인딩합니다
<div class="hello">
<p>php中文网</p>
</div>
$('.hello').on("click",fn)remove 메소드를 사용하지 않고 이 노드를 삭제하는 것은 실제로 매우 간단하지만 동시에 이벤트가 삭제되어야 합니다. 이는 "메모리"를 방지하기 위한 것입니다. 누수"이므로 프런트엔드 개발자는 반드시 이벤트가 몇 개 묶여 있는지 주의하고, 사용하지 않을 때는 반드시 파기하세요
remove 메소드를 통해 div와 그 안의 모든 요소를 제거하세요. 이벤트 파기 메소드가 자동으로 작동됩니다.
//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>php中文网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁remove 표현식 매개변수를 제거하는 것은 매우 간단합니다.
비어 있는 것보다 제거의 장점은 선택기 표현식을 전달하여 제거할 일치 요소 세트를 필터링할 수 있고 선택적으로 삭제할 수 있다는 것입니다. 지정된 노드
$()를 사용하여 동일한 요소의 그룹을 선택한 다음 제거()를 통해 필터링 규칙을 전달하면 다음과 같이 처리될 수 있습니다
오른쪽 코드 영역과 비교하면 이렇게 처리할 수 있습니다
$("p").filter(":contains('3')").remove()아래에 예제 코드를 작성해 보겠습니다. 효과
<!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>
.test1 {
background: #bbffaa;
}
.test2 {
background: yellow;
}
</style>
</head>
<body>
<h2>通过jQuery remove方法移除元素</h2>
<div class="test1">
<p>p元素1</p>
<p>p元素2</p>
</div>
<div class="test2">
<p>p元素3</p>
<p>p元素4</p>
</div>
<button>点击通过jQuery的empty移除元素</button>
<button>点击通过jQuery的empty移除指定元素</button>
<script type="text/javascript">
$("button:first").on('click', function() {
//删除整个 class=test1的div节点
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中，包含了3的元素
//这个也是一个过滤器的处理
$("p").remove(":contains('3')")
})
</script>
</body>
</html>
다음 섹션