DOM 기반 비움과 제거의 차이점에 대한 자세한 예-JS 튜토리얼-php.cn

DOM 기반 비움과 제거의 차이점에 대한 자세한 예

小云云

풀어 주다： 2017-12-29 09:44:15

원래의

1471명이 탐색했습니다.

이 글은 주로 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>

로그인 후 복사