82 

var paras = document.getElementsByClassName('hi');

for (var i = 0; i < paras.length; i++) {
  paras[i].style.color = '#ff0011';
  // $('.hi').remove();
}
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p class="hi">dood</p>
<p>not class 'hi'</p>

jQueryでは、これは非常に簡単です$('.hi').remove();。JS、次にjQueryを学びたいです。

私は立ち往生していて、Googleは提供していません。コピー/貼り付けのjQueryプログラマーになりたくありません。私はJSを学び始めたばかりです。ありがとう。

4

4 に答える 4

115

要素を削除するには、次のようにします。

el.parentNode.removeChild(el);

MDNは優れたリファレンスです。関連するページは次のとおりです。

ノード
parentNoderemoveChild
_

ただし、 getElementsByClassNameがライブリストを返すため、そのようにループすると問題が発生します。ノードを削除すると、要素もリストから削除されるため、インクリメントしないでください。そうしないと、他のすべての要素をスキップすることになります。代わりに、最初の要素がなくなるまで、リストの最初の要素を継続的に削除します。

var paras = document.getElementsByClassName('hi');

while(paras[0]) {
    paras[0].parentNode.removeChild(paras[0]);
}​

IMO jQueryは、Javascriptで何ができるかを示すのに優れています。私は実際に、プレーンJSを約1〜2週間行った後、jQueryを学び、それを上手に使い、それが何を抽象化しているかを覚えておくことをお勧めします。ある日、jQueryの使用中に取得できるJavascriptのスコープやオブジェクトなどをよく理解したら、戻って、ライブラリなしでDOMとより適切に対話する方法を学習してみてください。そうすれば、プレーンなJSをより簡単に学ぶことができ、ライブラリが提供する抽象化をさらに理解できるようになります。また、ライブラリが提供するものが1つか2つだけ必要な場合は、ライブラリがなくても自分で作成できる可能性があることを学びます。ライブラリ全体を含みます。

于 2012-05-31T23:15:04.483 に答える
71

簡単なES6の答え：

document.querySelectorAll('.classname').forEach(e => e.remove());

説明：

  1. document.querySelectorAll()ドキュメント内の要素をループして、指定されたセレクター（、、など）を持つすべての要素のNodeListを返します。'.class''#id''button'
  2. forEach()NodeListをループし、要素ごとに指定されたアクションを実行します
  3. e => e.remove()DOMから要素を削除します

ただし、このソリューションはInternetExplorerではサポートされていないことに注意してください。繰り返しますが、何もありません。

于 2019-08-18T18:12:46.803 に答える
18 
[].forEach.call(document.querySelectorAll('.hi'),function(e){
  e.parentNode.removeChild(e);
});

ここでArray.prototype.forEachは、配列のようなオブジェクト内のすべての要素を簡単にトラバースするために使用しています。つまり、によって返される静的NodeListquerySelectorAllを使用removeChild()してから、DOMからアイテムを削除するために使用しています。

querySelectorAll()またはをサポートしていない古いブラウザの場合forEach()：

var classMatcher = /(?:^|\s)hi(?:\s|$)/;
var els = document.getElementsByTagName('*');
for (var i=els.length;i--;){
  if (classMatcher.test(els[i].className)){
    els[i].parentNode.removeChild(els[i]);
  }
}

ライブgetElementsByTagNameNodeListを返すため、DOMからアイテムを削除するときに、アイテムを後ろから前に繰り返す必要があることに注意してください。

querySelectorAllサポートしていないがサポートしている古いブラウザもいくつかありgetElementsByClassNameます。これを使用すると、パフォーマンスを向上させ、コードを減らすことができます。

于 2012-05-31T23:14:05.943 に答える
1

Afaikは、ネイティブJSで子を削除できるのは親だけです。したがって、最初にその要素の親を取得してから、親を使用して要素を削除する必要があります。これを試して：

var parent = paras[i].parentNode;
parent.removeChild(paras[i]);
于 2012-05-31T23:13:50.690 に答える