DOM 기반 비움과 제거의 차이점에 대한 자세한 예
이 글은 주로 DOM 노드 삭제에 따른 비움과 제거의 차이점에 대한 글을 제공합니다(자세한 설명). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
페이지에서 노드를 제거하는 것은 개발자에게 일반적인 작업입니다. jQuery는 이 문제를 해결하기 위한 여러 가지 방법을 제공합니다. 여기서는 비어 있는 메서드와 제거 메서드를 자세히 살펴보겠습니다.
empty 이름에서 알 수 있듯이 비어 있는 메서드는 다릅니다. delete 메소드에서는 지정된 요소의 모든 하위 노드만 제거하기 때문에 약간 다릅니다.
이 방법은 하위 요소(및 기타 하위 요소)를 제거할 뿐만 아니라 요소 내의 텍스트도 제거합니다. 지침에 따라 요소의 모든 텍스트 문자열은 요소의 하위 노드로 간주되기 때문입니다. 아래 HTML을 살펴보세요.
<p class="hello"><p>这是p标签</p></p>
빈 메소드를 통해 내부 p의 모든 요소를 제거하면 내부 HTML 코드만 지워지지만 마크업은 여전히 DOM에 남아 있습니다.
//通过empty处理
$('.hello').empty()
//结果：<p>这是p标签</p>被移除
<p class="hello"></p>다음을 통해 현재 p 요소 아래의 요소를 제거합니다. 비어 있음 모든 p 요소, 그러나 id=test인 p 요소는 삭제되지 않았습니다.
<!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>
p {
background: #bbffaa;
width: 300px;
}
</style>
</head>
<body>
<h2>通过empty移除元素</h2>
<p id="test">
<p>p元素1</p>
<p>p元素2</p>
</p>
<button>点击通过jQuery的empty移除元素</button>
<script type="text/javascript">
$("button").on('click', function() {
//通过empty移除了当前p元素下的所有p元素
//但是本身id=test的p元素没有被删除
$("#test").empty()
})
</script>
</body>
</html>remove는 비어 있는 것과 동일하며 요소를 제거하는 방법이지만 제거는 요소 자체와 요소 내부의 모든 것을 제거합니다. 요소와 관련된 이벤트 및 jQuery 데이터.
예를 들어 노드의 경우 클릭 이벤트를 바인딩합니다
<p class="hello"><p>这是P段落</p></p>
$('.hello').on("click",fn)remove 메소드를 사용하지 않고 이 노드를 삭제하는 것은 실제로 매우 간단하지만 동시에 이벤트가 삭제되어야 합니다. 이는 "메모리"를 방지하기 위한 것입니다. 누수"이므로 프런트엔드 개발자는 이벤트가 몇 개 연결되어 있는지 확인하고 사용하지 않을 때는 반드시 파기해야 합니다.
remove 메소드를 통해 p와 모든 내부 요소를 제거합니다. 이벤트 파기 메소드는 제거 내에서 자동으로 작동됩니다. ,
//通过remove处理
$('.hello').remove()
//结果：<p class="hello"><p>这是P段落</p></p> 全部被移除 //节点不存在了,同事事件也会被销毁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>
<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>
</html>지정된 요소를 제거해야 할 때 jQuery는 빈 두 가지 메서드를 제공합니다. () 및 제거([expr]), 둘 다 삭제 요소이지만 둘 사이에는 여전히 차이점이 있습니다.
지정된 요소를 제거해야 할 때 jQuery는 빈() 및 제거([라는 두 가지 메서드를 제공합니다. expr]) 둘 다 요소를 삭제하지만 둘 다 여전히 차이가 있습니다
empty 메서드
엄밀히 말하면,empty() 메서드는 노드를 삭제하지 않지만 노드를 지웁니다. 요소
empty는 자체 노드를 삭제할 수 없습니다
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>
.left,
.right {
width: 300px;
}
.left p,
.right p {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left p {
background: #bbffaa;
}
.right p {
background: yellow;
}
</style>
</head>
<body>
<h2>通过empty与remove移除元素</h2>
<p class="left">
<button id="bt1">点击通过jQuery的empty移除内部P元素</button>
<button id="bt2">点击通过jQuery的remove移除整个节点</button>
</p>
<p class="right">
<p id="test1">
<p>p元素1</p>
<p>p元素2</p>
</p>
<p id="test2">
<p>p元素3</p>
<p>p元素4</p>
</p>
</p>
<script type="text/javascript">
$("#bt1").on('click', function() {
//删除了2个p元素，但是本着没有删除
$("#test1").empty()
})
$("#bt2").on('click', function() {
//删除整个节点
$("#test2").remove()
})
</script>
</body>
</html>관련 추천:
php의 is_null, isset, empty 함수 소개
위 내용은 DOM 기반 비움과 제거의 차이점에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7737
15
1643
14
1397
52
1290
25
1233
29
PHP는 지정된 키가 배열에 존재하는지 확인합니다.
Mar 21, 2024 pm 09:21 PM
이 글에서는 PHP가 특정 키가 배열에 존재하는지 여부를 어떻게 판단하는지 자세히 설명할 것입니다. 편집자는 이것이 매우 실용적이라고 생각하므로 이 글을 읽으신 후 참고하실 수 있기를 바랍니다. PHP는 지정된 키가 배열에 존재하는지 확인합니다. PHP에서는 지정된 키가 배열에 존재하는지 확인하는 여러 가지 방법이 있습니다. 1. isset() 함수를 사용합니다: isset($array["key"]) 이 함수 부울 값을 반환합니다. 지정된 키가 존재하면 true이고, 그렇지 않으면 false입니다. 2. array_key_exists() 함수를 사용하세요: array_key_exists("key",$arr
C#에서 StringBuilder.Remove 함수를 사용하여 문자열의 지정된 부분을 제거합니다.
Nov 18, 2023 pm 01:28 PM
C#에서 StringBuilder.Remove 함수를 사용하여 문자열의 지정된 부분을 삭제합니다. C#에서 StringBuilder 클래스는 문자열을 수정하고 조작할 수 있는 변경 가능한 문자열 유형입니다. StringBuilder의 제거 기능은 문자열의 지정된 부분을 삭제하는 편리한 방법을 제공합니다. StringBuilder.Remove 함수의 사용법은 다음과 같습니다. publicStringBuilde
수단을 제거하다
Aug 04, 2023 am 11:29 AM
제거는 데이터 구조에서 요소, 노드 또는 문자를 삭제하는 것을 의미합니다. 구체적인 구현은 사용된 프로그래밍 언어 및 데이터 구조에 따라 다릅니다. 배열이든, 연결된 목록이든, 문자열이든 제거 작업은 프로그래머가 자주 사용하는 작업 중 하나이며 데이터 처리 및 알고리즘 구현에 매우 중요합니다.
지정된 인덱스 위치에서 요소를 제거하려면 Java의 ArrayList.remove() 함수를 사용하십시오.
Jul 27, 2023 pm 12:51 PM
Java의 ArrayList.remove() 함수를 사용하여 지정된 인덱스 위치의 요소를 제거합니다. Java 컬렉션 프레임워크에서 ArrayList는 요소를 조작하고 관리하는 데 편리한 여러 가지 방법을 제공하는 동적 배열입니다. 그 중 Remove()는 ArrayList 클래스에서 가장 많이 사용되는 함수 중 하나이다. Remove() 함수는 인덱스 위치에 따라 ArrayList에서 요소를 제거할 수 있습니다. ArrayList.remov를 사용하는 방법을 살펴보겠습니다.
Jul 25, 2023 am 10:23 AM
PHP 함수 소개—empty(): 변수가 비어 있는지 확인 PHP 프로그래밍에서는 변수가 비어 있는지를 판단하는 것이 일반적인 요구 사항입니다. PHP에 내장된 empty() 함수는 변수가 비어 있는지 확인하는 데 사용됩니다. 이 기사에서는 empty() 함수의 사용법을 소개하고 몇 가지 실용적인 코드 예제를 제공합니다. empty() 함수의 사용법은 매우 간단합니다. 하나의 매개변수를 받아들이고 부울 값을 반환합니다. 매개변수의 값이 다음 상황 중 하나일 경우,empty() 함수는
시계열 기반 이상 탐지 문제
Oct 09, 2023 pm 04:33 PM
시계열 기반 이상 징후 탐지 문제에는 특정 코드 예제가 필요합니다. 시계열 데이터는 주가, 온도 변화, 교통 흐름 등 시간에 따라 특정 순서로 기록된 데이터입니다. 실제 응용에서 시계열 데이터의 이상 탐지는 매우 중요합니다. 이상값은 정상적인 데이터, 노이즈, 잘못된 데이터 또는 특정 상황에서 예상치 못한 이벤트와 일치하지 않는 극단적인 값일 수 있습니다. 이상 탐지는 이러한 이상을 발견하고 적절한 조치를 취하는 데 도움이 됩니다. 시계열 이상 탐지 문제의 경우 일반적으로 사용됨
C에서 벡터의 삭제 기능을 사용하는 방법
Feb 18, 2024 am 11:29 AM
C에서 벡터를 제거하려면 특정 코드 예제가 필요합니다. C 언어의 벡터는 런타임에 크기를 조정할 수 있는 동적 배열입니다. 여러 객체를 저장하고 조작하는 데 매우 일반적으로 사용되는 데이터 구조입니다. 실제 응용에서는 벡터에 새 요소를 삽입하거나 기존 요소를 삭제해야 하는 경우가 많습니다. 이 기사에서는 C 언어에서 벡터 제거를 사용하는 방법을 자세히 소개하고 해당 코드 예제를 제공합니다. 벡터의 제거 함수 프로토타입: v
