web-dev-qa-db-ja.com

querySelectorAllを使用してフェッチされた要素を削除する方法は？

これは手っ取り早い答えのように思えますが、見つけられません。たぶん間違った用語を検索していますか？クロスブラウザフォールバックは必要ありませんが、このプロジェクトのすべての最新バージョンをターゲットにしています。

私はいくつかの要素を取得しています：

_element = document.querySelectorAll(".someselector");
_

これは機能していますが、これらの要素を削除するにはどうすればよいですか？それらをループしてelement.parentNode.removeChild(element);を実行する必要がありますか、それとも単純な関数がありませんか？

javascriptelementselectors-api
43
Randy Hall

はい、あなたはほとんど正しいです。 .querySelectorAllはfrozen NodeListを返します。あなたはそれを繰り返し、物事を行う必要があります。

Array.prototype.forEach.call( element, function( node ) {
    node.parentNode.removeChild( node );
});

結果が1つしか得られなかった場合でも、次のようにインデックス経由でアクセスする必要があります。

elements[0].parentNode.removeChild(elements[0]);

wantのみで1つの要素を照会する場合は、.querySelector代わりに。そこで、インデックスでアクセスする必要なしに、ノード参照を取得します。

52
jAndy

NodeListはすでにforEachをサポートしているため、使用することができます

document.querySelectorAll(".someselector").forEach(e => e.parentNode.removeChild(e));
<div>
  <span class="someselector">1</span>
  <span class="someselector">2</span>
  Should be empty
</div>

NodeList.prototype.forEach（） を参照してください。

Internet Explorerのサポート。 IEはforEachでNodeListをサポートしていないため、上記のコードをIEで動作させたい場合は、このコードをJavaScriptコード：

if (!NodeList.prototype.forEach && Array.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

..and NodeList in IEは突然forEachもサポートします。

23
Ivan Sivak

Array.from および ChildNode.remove でさらに簡潔に：

Array.from(document.querySelectorAll('.someselector')).forEach(el => el.remove());

わかりました、NodeListは反復可能であるため、さらに短くすることができます：

document.querySelectorAll('.someselector').forEach(el => el.remove());
5
Simon