jquery에서 노드를 삭제하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

jquery에서 노드를 삭제하는 방법은 무엇입니까?

伊谢尔伦

풀어 주다： 2017-06-17 13:33:47

원래의

1931명이 탐색했습니다.

1 nodeDeleteempty()의 기본 사용법

페이지에서 노드를 제거하는 것은 개발자에게 일반적인 작업입니다. jQuery에서는 이 문제를 해결하기 위한 여러 가지 방법을 제공합니다. theempty 메소드

empty 이름에서 알 수 있듯이, 빈 메소드는 지정된 요소의 모든 하위 노드만 제거한다는 점에서 삭제와 약간 다릅니다.

이 방법은 하위 요소(및 기타 하위 요소)를 제거할 뿐만 아니라 요소 내의 텍스트도 제거합니다. 지침에 따라 요소의 모든 텍스트 string은 요소의 하위 노드로 간주되기 때문입니다. 아래 HTML을 보세요.

<p class="hello"><p>php.cn</p></p>

로그인 후 복사

빈 메소드를 통해 p 내부의 모든 요소를 제거하면 내부 HTML 코드만 지워지지만 DOM에는 마크업이 여전히 남아 있습니다.

//通过empty处理
$(&#39;.hello&#39;).empty()
//结果：<p>php.cn</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(&#39;click&#39;, function() {
        //通过empty移除了当前p元素下的所有p元素
        //但是本身id=test的p元素没有被删除
        $("#test").empty()
    })
    </script>
</body>
</html>

로그인 후 복사

2. 노드 삭제

remove를 위한 매개변수화 및 매개변수 없는 사용은 비어 있는 것과 동일하며 둘 다 요소를 제거하는 방법이지만 제거합니다. 이렇게 하면 요소 자체는 물론 요소와 관련된 바인딩된 이벤트 및 jQuery 데이터를 포함하여 요소 내부의 모든 내용이 제거됩니다.

예를 들어 노드의 경우 클릭 이벤트를 바인딩합니다

<p class="hello"><p>php.cn</p></p>
$('.hello').on("click",fn)

로그인 후 복사

remove 메소드를 사용하지 않고 이 노드를 삭제하는 것은 실제로 매우 간단하지만 동시에 이벤트가 삭제되어야 합니다. 이는 "메모리"를 방지하기 위한 것입니다. 누수"이므로 프런트엔드 개발자는 이벤트가 몇 개 연결되어 있는지 확인하고 사용하지 않을 때는 반드시 파기해야 합니다.

remove 메소드를 통해 p와 모든 내부 요소를 제거합니다. 이벤트 파기 메소드는 제거 내에서 자동으로 작동됩니다. 이므로 사용이 매우 간단합니다

//通过remove处理
$('.hello').remove()
//结果：<p class="hello"><p>php.cn</p></p> 全部被移除
//节点不存在了,同事事件也会被销毁

로그인 후 복사

removeExpression 매개변수:

비어 있는 것보다 제거하는 것이 좋은 점은 선택기 표현식을 전달하여 제거할 일치 요소 집합을 필터링할 수 있고 선택적으로 삭제할 수 있다는 것입니다. 지정된 노드

$()를 통해 하나를 선택할 수 있습니다. 동일한 요소를 그룹화한 다음 제거()를 통해 필터링 규칙을 전달하면 다음과 같이 처리됩니다.

오른쪽 코드 영역과 비교하면 처리할 수 있습니다. 이렇게

$("p").filter(":contains(&#39;3&#39;)").remove()

로그인 후 복사

3. 노드 삭제 시 공백과 제거의 차이점

jQuery에서는 지정된 요소를 제거할 때 공백()과 제거([expr])라는 두 가지 메서드를 제공하지만 둘 다 요소를 삭제합니다.

empty 메소드

엄밀히 말하면 비어 있습니다. () 메소드는 노드를 삭제하지 않지만 요소의 모든 하위 노드를 지울 수 있습니다.

empty는 자체 노드를 삭제할 수 없습니다. node.

remove 메소드

노드와 해당 노드에 포함된 모든 하위 노드가 동시에 삭제됩니다.Deleted

지정된 컬렉션의 요소를 삭제하는 필터링 표현식을 제공합니다

4. 유지 데이터 삭제 작업 detach()

페이지에서 노드를 일시적으로 삭제하고 싶지만 그렇지 않은 경우 해당 노드의 데이터 및 이벤트가 손실되고 삭제된 노드가 화면에 표시되기를 바라는 경우 다음 기간에는 detach 메소드를 사용하여 처리할 수 있습니다.

detach는 문자 그대로 이해하기 매우 쉽습니다. 웹 요소를 호스팅하자. 즉, 요소가 현재 페이지에서 제거되지만 이 요소의 메모리 모델 개체는 유지됩니다.

jquery 공식 문서의 설명을 살펴보겠습니다.

이 메서드는 jQuery 개체에서 일치하는 요소를 삭제하지 않으므로 이러한 일치하는 요소는 나중에 다시 사용할 수 있습니다. 제거()와 달리 모든 바인딩된 이벤트, 첨부된 데이터 등이 유지됩니다. $("p").detach() 문장은 객체를 제거하지만 표시 효과는 사라집니다. 그러나 그것은 아직도 기억 속에 존재한다. 추가하면 문서 흐름으로 돌아갑니다. 다시 나타났습니다.

물론, detach 메소드는 JQuery 메소드를 통해 바인딩된 이벤트나 데이터만 처리할 수 있다는 점에 특별한 주의가 필요합니다.

$("p").detach()를 통해 모든 P 요소를 삭제한 후. , 그런 다음 삭제된 p 요소를 추가를 통해 페이지에 배치하고 텍스트를 클릭하여 이벤트가 손실되지 않았음을 증명합니다

5. 노드 삭제를 위한 detach()와 제거()의 차이점은

JQuery는 매우 강력한 도구 라이브러리, 작업 개발에서 일부 방법은 일반적으로 사용되지 않거나 눈에 띄지 않기 때문에 무시됩니다.

remove() 및 detach()는 그 중 하나일 수 있습니다. 어쩌면 우리는 제거()를 더 많이 사용할 수도 있지만 detach()는 더 적게 사용할 수도 있습니다.

remove: 노드 제거

매개변수 없음, 자체 제거 전체 노드와 내부의 모든 노드 노드의 이벤트 및 데이터를 포함한 노드

매개변수를 사용하여 필터링된 노드와 노드의 이벤트 및 데이터를 포함하여 노드 내부의 모든 노드를 제거합니다

분리: 노드 제거

제거 프로세스는 제거와 일치합니다

remove()와의 차이점은 모든 바인딩된 이벤트, 추가 데이터 등이 유지된다는 것입니다.

예: $("p").detach()가 이동됩니다. 개체를 제외하고 표시 효과만 사라집니다. 그러나 그것은 아직도 기억 속에 존재한다. 추가하면 문서 흐름으로 돌아갑니다. 다시 나타났습니다.