javascript - 同じクラス、純粋なjsを持つノードからすべての子を削除します

Question

重複の可能性:
JavaScript で特定のクラスを持つすべての要素を削除する

タイトルのとおり、Google 検索ではすべての jquery の結果が表示されます。これを行う方法はありますか？元。

<div id="container">
   <div class="dontdelete">...</div>
   <div class="deleteme>...</div>
   <div class="dontdelete">...</div>
   <div class="deleteme>...</div>
   <div class="dontdelete">...</div>
   <div class="deleteme>...</div>
</div>

「deleteme」クラスですべての子を削除する純粋なjavascriptのメソッドはありますか? 前もって感謝します。

Answer 1

はライブelement.getElementsByClassNameノード リストを返すため、特定の方法でリストをループする必要があります (DOM からそれらを削除すると、リストからも削除されるため)。次のようなことを試してください：

var container = document.getElementById("container");
var elements = container.getElementsByClassName("deleteme");

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

デモ: http://jsfiddle.net/sR2zT/1/

またはelement.querySelectorAll、要素を選択するようなものを使用して、次のようなことができます。

document.querySelectorAll("#container .deleteme")
// or
document.getElementById("container").querySelectorAll(".deleteme")

このシナリオでは、ライブノード リストが含まれていないため、特別なループを実行する必要はありません。querySelectorAll

参考文献:

• getElementsByClassName()- https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName
• querySelectorAll()- https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
• removeChild()- https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

Answer 2

getElementsByClassNameあなたはおそらくあなたのすべての要素を手に入れることを探しています。次に、のようなものremoveChildを使用してノードを削除できます。

​var elements = document.getElementById("container")
                   .getElementsByClassName("deleteme");    ​​​

while (elements.length > 0) {
    elements[0].parentNode.removeChild(elements[0]);
}

実例： http： //jsfiddle.net/ja4Zt/1/

ブラウザのサポート：

このソリューションの唯一の注意点は、IEでのサポートが制限されていることです。この表によるとgetElementsByClassName、バージョン9の時点でIEに実装されています。

これを橋渡しするために、IDコンテナを持つ要素の子であるすべてのノードを選択し、それらをループして、クラス「deleteme」があるかどうかを確認してから、それらを削除することができます。

Answer 3

.getElementsByClassName()このバージョンは、他の人が言及したように、特定の IE バージョンではサポートされていないものを使用する必要がなくなります。

var divs = document.getElementById("container").childNodes;
var i = divs.length;
while( i-- ) {
    if( divs[i].className && divs[i].className.indexOf("deleteme") > -1 ) {
      divs[i].parentNode.removeChild( divs[i] );
    }
}​

これはまた、結果の配列を後方にトラバースするため、ノードを削除しても次の反復には影響しません。

ここでフィドル

Answer 4

var divs = document.getElementsByClassName("deleteme");
for (var idx = 0; idx != divs.length; idx++) {
  var div = divs[idx];
  while (div.firstChild)
    div.removeChild(div.firstChild);
}

</p>