DOM を削除するための JQuery メソッド nodes_jquery

この記事の例では、JQuery を使用して DOM ノードを削除する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

文書内で要素が重複している場合は、削除する必要があります。 JQuery には、ノードを削除するための 2 つのメソッド、remove() と empty() が用意されています。

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 式に基づいて要素をフィルターするために使用されます。

たとえば、

ノードの 2 番目の
• 要素ノードを削除するには、JQuery コードは次のようになります。

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

  ログイン後にコピー
  コードを実行すると、2 番目のノードが削除されます。
  remove() メソッドを使用してノードを削除すると、そのノードに含まれるすべての子孫ノードも同時に削除されます。このメソッドの戻り値は削除されたノードへの参照であるため、要素は後で再度使用できます。次の JQuery コードは、remove() メソッドを使用して要素が削除された後も、その要素が引き続き使用できることを示しています。

  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()方法也可以用来移动元素 
  //移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点
  
  

  ログイン後にコピー
  さらに、remove() メソッドはパラメータを渡すことで要素を選択的に削除することもできます。JQuery コードは次のとおりです。

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

  ログイン後にコピー

  empty() メソッド

  厳密に言えば、empty() メソッドはノードを削除しませんが、要素内のすべての子孫ノードをクリアできます。 JQuery コードは次のとおりです:

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

  ログイン後にコピー
  コードが実行されると、2 番目の
• 要素の内容がクリアされ、
• タグのデフォルトの記号「.」だけが残ります。
  この記事が皆さんの jQuery プログラミングに役立つことを願っています。