按类名Javascript删除

时间:2017-01-14 06:07:07

标签: javascript html5

我正在尝试使用特定的类名从页面中删除所有元素,但由于某种原因,只会删除备用类。

代码笔链接在这里 https://codepen.io/miller619/pen/WoVpdE

<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>
long

我哪里错了?

1 个答案:

答案 0 :(得分:2)

只需更改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--;
        }
    } 
    }