이 글은 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!