JavaScript / getElementsByClassNameで要素の削除

こんにちは。
飲み会とかガヤガヤした場所で声が通らないのがコンプレックスの、トキです。
そういう場ではファの音階で話すと一番声が通りやすいらしいですよ。
音痴なので無理です。

さて、今日は
JavaScriptでhtml要素をgetElementsByClassNameで取得し、その要素を削除する方法
をメモします。

年末ということで、たまりに溜まった諸悪の根源を浄化したいと思います。

<div class="taizai">傲慢</div>
<div class="taizai">憤怒</div>
<div class="taizai">嫉妬</div>
<div class="taizai">怠惰</div>
<div class="taizai">強欲</div>
<div class="taizai">暴食</div>
<div class="taizai">色欲</div>
<button onclick="purify('taizai');">浄化</button>

<script>
  function purify(className) {
    //1. div要素をクラス名で取得
    var elems = document.getElementsByClassName(className);
    
    //2. 要素を一つづつ取り出す
    for (var i in elems) {
      
      //3. 先頭の要素を取得
      var e = elems[0];

      //4. 取得した要素を削除
      e.parentNode.removeChild(e);
    }
  }
</script>

普通のfor文ならこんな感じですかね。

<script>
  function purify(className) {

  var elems = document.getElementsByClassName(className);

  var len = elems.length;
  for (var i = 0; i < len; i++) {

    var e = elems[0];
    e.parentNode.removeChild(e);
  }
}
</script>