[解決済み] DOMから特定のクラスの要素をすべて削除するには？

質問

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を学び始めたばかりです。ありがとうございます。

どのように解決するのですか？

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

el.parentNode.removeChild(el);

MDNは素晴らしいリファレンスです。いくつか関連するページを紹介します。

ノード

親ノード

子を削除

ただし、このようにループさせると getElementsByClassName は生きているリストを返すので、ノードを削除するとその要素もリストから削除され、インクリメントしてはいけません。代わりに、最初の要素がなくなるまで、リスト内の最初の要素を削除し続けます。

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

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

IMO jQueryは、Javascriptで何ができるかを示すのに最適なツールです。 私は実際に、1～2週間ほどプレーンなJSを使用した後、jQueryを学び、それをうまく使いこなし、それが何を抽象化しているかを覚えておくことをお勧めします。ある日、jQueryを使いながらJavascriptのスコープやオブジェクトなどを完全に把握できるようになったら、ライブラリなしでDOMとうまくやりとりする方法を学んでみてください。そうすれば、プレーンなJSを学ぶのがより簡単になり、ライブラリが提供する抽象化をより高く評価できるようになりますし、ライブラリが提供するものが1つか2つしか必要ないときは、ライブラリ全体を含めずに自分で書くことができるかもしれないと学ぶことができます。