이 글에서는 주로 jQuery에서 DOM 노드를 삭제하는 방법을 소개하고 있습니다. 이 글의 소개 부분에는 비어있는()의 기본 사용법, 매개변수화 및 매개변수 없는 제거() 사용법, 비어있음과 제거의 차이점, 그리고 데이터 삭제 작업인 detach()와 detach()와 Remove()의 차이점을 참고하세요.
서문
페이지에서 노드를 제거하는 것이 개발자에게 일반적인 작업이라는 것은 누구나 알고 있다고 믿습니다. jQuery는 여러 가지 방법을 사용합니다. 이 문제를 해결하기 위해. 다음 기사에서는 자세한 소개를 제공합니다. 관심있는 친구들은 살펴볼 수 있습니다.
1. 비어 있음
비어 있음 이름 그대로 비어 있음 방식이지만 삭제와는 조금 다릅니다. 왜냐하면 지정된 요소의 모든 하위 노드만 제거하기 때문입니다.
이 방법은 하위 요소(및 기타 하위 요소)를 제거할 뿐만 아니라 요소 내의 텍스트도 제거합니다. 지침에 따라 요소의 모든 텍스트 문자열은 요소의 하위 노드로 간주되기 때문입니다. 빈 메소드를 통해 p 내부의 모든 요소를 제거하면 내부 HTML 코드만 지워지지만 마크업은 여전히 DOM에 남아 있습니다. 비어 있음을 통해 현재 p 요소 아래의 모든 p 요소는 제거되지만 p 요소 자체는 id=test 삭제되지 않았습니다.
$("button").on('click', function() {
//通过empty移除了当前p元素下的所有p元素
//但是本身id=test的p元素没有被删除
$("#test").empty()
})2.remove
remove는 비어있는 것과 같은 방법이지만 요소를 제거하면 자체도 제거됩니다. 요소와 관련된 바인딩된 이벤트 및 jQuery 데이터를 포함하여 요소 내부의 모든 것입니다.
예를 들어 노드는 click 이벤트에 바인딩되어 있습니다. 실제로는 제거 메소드를 사용하지 않고 이 노드를 삭제하는 것이 매우 간단하지만 동시에 이벤트가 소멸되는 것을 방지해야 합니다. "메모리 누수"가 발생하므로 프런트 엔드 개발자는 얼마나 많은 이벤트가 묶여 있는지 주의를 기울이고 사용하지 않을 때는 해당 이벤트를 파기하는 것을 잊지 마십시오. 제거 메소드를 통해 p 및 그 안에 있는 모든 요소를 제거합니다. 이벤트 소멸 메소드는 제거 내부에서 자동으로 수행되므로 사용이 매우 간단합니다.
표현 매개변수 제거:
🎜> 비어 있는 것에 비해 제거의 장점은 제거할 일치 요소 집합을 필터링하는 선택기 표현식을 전달할 수 있다는 것입니다.을 통해 동일한 요소의 그룹을 선택적으로 삭제할 수 있습니다. $()과 같은 필터링 규칙을 remove（）을 통해 전달합니다. $("p").filter(":contains('3')").remove()
<body>
<style>
.test1 {
background: #bbffaa;
}
.test2 {
background: yellow;
}
</style>
<h2>通过jQuery remove方法移除元素</h2>
<p class="test1">
<p>p元素1</p>
<p>p元素2</p>
</p>
<p class="test2">
<p>p元素3</p>
<p>p元素4</p>
</p>
<button>点击通过jQuery的empty移除元素</button>
<button>点击通过jQuery的empty移除指定元素</button>
<script type="text/javascript">
$("button:first").on('click', function() {
//删除整个 class=test1的p节点
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中，包含了3的元素
//这个也是一个过滤器的处理
$("p").remove(":contains('3')")
})
</script>
</body>비우기와 제거의 차이
및 empty()두 가지 방법 모두 요소를 삭제하지만 둘 사이에는 여전히 차이점이 있습니다. remove([expr])
empty 방법
방법은 노드를 삭제하는 것이 아니라 노드를 지우는 것입니다. empty()
비어 있으면 해당 노드를 삭제할 수 없습니다.
제거 방법
3. 분리
공식 설명: 이 메서드는 jQuery 객체에서 일치하는 요소를 삭제하지 않으므로 이러한 일치하는 요소는 나중에 다시 사용할 수 있습니다. 과 달리 바인딩된 이벤트, 첨부된 데이터 등은 모두 유지됩니다. remove()이 문장은 개체를 제거하지만 표시 효과는 사라집니다. 그러나 그것은 아직도 기억 속에 존재한다. 추가하면 문서 흐름으로 돌아갑니다. 다시 나타났습니다. $("p").detach()
. 삭제 후 텍스트를 클릭하여 추가 및 테스트를 통해 삭제된 p를 페이지에 넣을 수 있습니다. $("p").detach()
<body>
<p>P元素1，默认给绑定一个点击事件</p>
<p>P元素2，默认给绑定一个点击事件</p>
<button id="bt1">点击删除 p 元素</button>
<button id="bt2">点击移动 p 元素</button>
<script type="text/javascript">
$('p').click(function(e) {
alert(e.target.innerHTML)
})
var p;
$("#bt1").click(function() {
if (!$("p").length) return; //去重
//通过detach方法删除元素
//只是页面不可见，但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("p").detach()
});
$("#bt2").click(function() {
//把p元素在添加到页面中
//事件还是存在
$("body").append(p);
});
</script>
</body>detach()와 제거의 차이점 ()
과 remove()는 그 중 하나일 수 있습니다. detach()는 더 많이 사용할 수도 있고, remove()detach() 두 가지 방법을 비교표를 통해 설명해 보겠습니다. 🎜>
| 方法名 | 参数 | 事件及数据是否也被移除 | 元素自身是否被移除 |
| remove | 支持选择器表达 | 是 | 是（无参数时），有参数时要根据参数所涉及的范围 |
| detach | 参数同remove | 否 | 情况同remove |
remove: 노드 제거
매개변수 없음, 전체 노드 자체와 노드의 이벤트를 포함하여 노드 내부의 모든 노드를 제거합니다. 매개변수 포함
, 필터링된 노드와 노드의 이벤트 및 데이터를 포함하여 노드 내부의 모든 노드를 제거합니다.
detach: 노드 제거
제거 프로세스는 제거
remove()와 다릅니다. 모두 바운드 이벤트, 추가 데이터 등은 유지됩니다
예: $("p").detach()이 문장은 개체를 제거하고 표시 효과가 사라집니다. 그러나 그것은 아직도 기억 속에 존재한다. 추가하면 문서 흐름으로 돌아갑니다. 다시 나타났습니다.
위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 jQuery 비디오 튜토리얼을 방문하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
