クラス名で削除する

Question

特定のクラス名でページからすべての要素を削除しようとしていますが、何らかの理由で代替クラスのみが削除されます。

コードペンリンクは、ここで私が間違っているつもりです https://codepen.io/miller619/pen/WoVpdE

function prev(e) { 
 
    'use strict'; 
 
    e.preventDefault(); 
 
    var getID = document.getElementById("zone"); 
 
    var removeXButtons = getID.getElementsByClassName("xbutton"); 
 
    for (var i = 0; i < removeXButtons.length; i++) { 
 
     removeXButtons[i].parentNode.removeChild(removeXButtons[i]); 
 
    } 
 

 
}

<div id="zone"> 
 
    <input class="xbutton" name="xbtn" type="button" value="&times;"> 
 
    <input class="xbutton" name="xbtn" type="button" value="&times;"> 
 
    <input class="xbutton" name="xbtn" type="button" value="&times;"> 
 
</div> 
 
<div id="pbtn" > <a href="#" class="btn btn-info btn-preview" onclick="prev(event)"><span class="glyphicon glyphicon-eye-open"></span> Delete all</a> </div>

のですか？

Answer 1

forループの順序を変更するだけで動作します。問題は、配列から要素を削除すると、要素の順序が変更されます。アレイを後方に移動すると、この問題が発生することはありません。代わりに、前方の後方

function prev(e) { 
    'use strict'; 
    e.preventDefault(); 
    var getID = document.getElementById("zone"); 
    var removeXButtons = getID.getElementsByClassName("xbutton"); 
    for (var i = removeXButtons.length-1; i >=0 ; i--) { 
     removeXButtons[i].parentNode.removeChild(removeXButtons[i]); 
    } 
} 
} 

あなたがループに転送したい場合は、あなたがこれを行うことができ、

function prev(e) { 
     'use strict'; 
     e.preventDefault(); 
     var getID = document.getElementById("zone"); 
     var removeXButtons = getID.getElementsByClassName("xbutton"); 
     for (var i = 0; i < removeXButtons.length-1 ; i++) { 
      removeXButtons[i].parentNode.removeChild(removeXButtons[i]); 
      i--; 
     } 
    } 
    }