DOM node_jquery를 삭제하는 JQuery 메서드

이 문서의 예에서는 JQuery를 사용하여 DOM 노드를 삭제하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

문서에 중복된 요소가 있으면 삭제해야 합니다. JQuery는 노드를 삭제하는 두 가지 메서드, 즉 제거()와 비어 있음()을 제공합니다.

HTML DOM 구조는 다음과 같습니다.

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='C编程'>简单易懂的C编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery'>简单易懂的JQuery编程</li>
</ul>

remove() 메소드

은 DOM에서 일치하는 모든 요소를 ​​제거하는 데 사용되며, 전달된 매개변수는 JQuery 표현식을 기반으로 요소를 필터링하는 데 사용됩니다.

예를 들어,

노드에서 두 번째
• 요소 노드를 삭제하려면 JQuery 코드는 다음과 같습니다.

  $(".nm_ul li:eq(1)").remove();
  // 获取第二个<li>元素节点后，将它从网页中删除

  코드를 실행하면 두 번째 노드가 삭제됩니다.

  remove() 메소드를 사용하여 노드를 삭제하면 해당 노드에 포함된 모든 하위 노드가 동시에 삭제됩니다. 이 메서드의 반환 값은 삭제된 노드에 대한 참조이므로 해당 요소는 나중에 다시 사용할 수 있습니다. 다음 JQuery 코드는 제거() 메서드를 사용하여 요소를 삭제한 후에도 계속 사용할 수 있음을 보여줍니다.

  var $li = $("nm_ul li:eq(1)").remove();
  // 获取第二个<li>元素节点后，将它从网页中删除。 
  $li.appendTo("nm_ul");
  // 把刚才删除的又重新添加到<ul>元素里 
  //所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它 
  
  

  appendTo() 메소드 기능을 직접 사용하여 위의 코드를 단순화할 수 있습니다.

  $("nm_ul li:eq(1)").appendTo("nm_ul"); 
  //appendTo()方法也可以用来移动元素 
  //移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点
  
  

  또한, 제거() 메소드는 매개변수를 전달하여 요소를 선택적으로 삭제할 수도 있습니다. JQuery 코드는 다음과 같습니다.

  // 把<li>元素中属性title不等于"菠萝"的<li>元素删除
  $("nm_ul li").remove("li[title!=JQuery]"); 
  
  

  empty() 메소드

  엄밀히 말하면empty() 메소드는 노드를 삭제하는 것이 아니라 요소의 모든 하위 노드를 지울 수 있습니다. JQuery 코드는 다음과 같습니다.

  $("nm_ul li:eq(1)").empty();
  // 找到第二个<li>元素节点后，清空此元素里的内容
  
  

  코드가 실행되면 두 번째

• 요소의 내용이 지워지고
• 태그의 기본 기호인 "."만 남습니다.

  이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.