클래스 이름으로 제거 자바 스크립트

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--; 
     } 
    } 
    }