jQuery DOM 노드 삭제

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

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

<div class="hello">
    <p>php中文网</p>
</div>
$('.hello').on("click",fn)

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

remove 메소드를 통해 div와 그 안의 모든 요소를 제거하세요. 이벤트 파기 메소드가 자동으로 작동됩니다.

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

remove 표현식 매개변수를 제거하는 것은 매우 간단합니다.

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

$()를 사용하여 동일한 요소의 그룹을 선택한 다음 제거()를 통해 필터링 규칙을 전달하면 다음과 같이 처리될 수 있습니다

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

$("p").filter(":contains('3')").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>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <button>点击通过jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on('click', function() {
        //删除整个 class=test1的div节点
        $(".test1").remove()
    })

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

</html>

지속적인 학습

새로운 파일

<!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> <div class="test1"> <p>p元素1</p> <p>p元素2</p> </div> <div class="test2"> <p>p元素3</p> <p>p元素4</p> </div> <button>点击通过jQuery的empty移除元素</button> <button>点击通过jQuery的empty移除指定元素</button> <script type="text/javascript"> $("button:first").on('click', function() { //删除整个 class=test1的div节点 $(".test1").remove() }) $("button:last").on('click', function() { //找到所有p元素中，包含了3的元素 //这个也是一个过滤器的处理 $("p").remove(":contains('3')") }) </script> </body> </html>

제출하다 코드 재설정

자동운전