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

たとえば、ff6d136ddc5fdfeffaf53ff6ee95f185 ノードの 2 番目の 25edfb22a4f469ecb59f1190150159c6 要素ノードを削除するには、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 番目の 25edfb22a4f469ecb59f1190150159c6 要素の内容がクリアされ、25edfb22a4f469ecb59f1190150159c6 タグのデフォルトの記号「.」だけが残ります。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。