DOM 노드 삭제 시 비어 있음과 제거의 차이점-JS 튜토리얼-php.cn

DOM 노드 삭제 시 비어 있음과 제거의 차이점

一个新手

풀어 주다： 2017-09-29 10:04:01

원래의

1958명이 탐색했습니다.

페이지에서 노드를 제거하는 것은 개발자에게 일반적인 작업입니다. jQuery는 이 문제를 해결하기 위한 여러 가지 방법을 제공합니다. 여기서는 비어 있는 메서드와 제거 메서드를 자세히 살펴보겠습니다.

empty 이름에서 알 수 있듯이 비어 있는 메서드는 삭제는 지정된 요소 내의 모든 하위 노드만 제거하기 때문에 약간 다릅니다.

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

<p class="hello"><p>这是p标签</p></p>

로그인 후 복사

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

//通过empty处理
$(&#39;.hello&#39;).empty()
//结果：<p>这是p标签</p>被移除<p class="hello"></p>

로그인 후 복사

通过empty移除了当前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>

로그인 후 복사

Remove는 공백과 마찬가지로 요소를 제거하는 방법이지만 제거는 요소 자체와 요소와 관련된 바인딩된 이벤트 및 jQuery 데이터를 포함하여 요소 내부의 모든 것을 제거합니다.

예를 들어 노드는 클릭 이벤트에 바인딩되어 있습니다

<p class="hello"><p>这是P段落</p></p>$(&#39;.hello&#39;).on("click",fn)

로그인 후 복사

실제로는 제거 메소드를 사용하지 않고 이 노드를 삭제하는 것이 매우 간단하지만 동시에 이벤트가 삭제되는 것을 방지해야 합니다. "메모리 누수", 따라서 프론트엔드 개발 독자는 얼마나 많은 이벤트가 연결되어 있는지 주의하고 사용하지 않을 때는 이를 파기해야 한다는 것을 기억해야 합니다.

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

//通过remove处理
$(&#39;.hello&#39;).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(&#39;click&#39;, function() {        //删除整个 class=test1的p节点        $(".test1").remove()
    })

    $("button:last").on(&#39;click&#39;, function() {        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理        $("p").remove(":contains(&#39;3&#39;)")
    })    </script></body></html>

로그인 후 복사

를 처리할 수 있습니다. 지정된 요소를 제거하려는 경우 jQuery 빈() 및 제거([expr] ) 두 가지 메서드를 제공합니다. 둘 다 요소를 삭제하지만 둘 사이에는 여전히 차이점이 있습니다.

지정된 요소를 제거해야 할 때 jQuery는 빈()과 두 가지 메서드를 제공합니다. Remove([expr]), 둘 다 요소를 삭제하지만 둘 사이에는 여전히 차이점이 있습니다

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(&#39;click&#39;, function() {        //删除了2个p元素，但是本着没有删除         $("#test1").empty()
    })

    $("#bt2").on(&#39;click&#39;, function() {        //删除整个节点        $("#test2").remove()
    })    </script></body></html>

로그인 후 복사

위 내용은 DOM 노드 삭제 시 비어 있음과 제거의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!