删除所选元素之后的所有 <select> 个元素

Question

我在表单中有一个动态生成的 <selects> 列表。我需要这样做，以便如果用户决定返回到较早的 <select>，则它之后的所有 <select> 都将从页面中删除。

我下面的代码将 console.log 删除正确的 <select> 元素，但如果我开始删除它们，它就会停止工作。我正在使用非实时列表循环，所以我很困惑为什么它没有按预期工作。

HTML:

<form action="#" method="post">
    <label for="select1">square 1:</label>
    <select name="1" id="select1"></select>
    <label for="select2">square 2:</label>
    <select name="2" id="select2"></select>
    <label for="select3">square 3:</select>
    <select name="3" id="select3"></select>
    ...
</form>

JS（select为当前选中的<select>）：

    var form = document.getElementsByTagName('form')[0];
    var selects = form.getElementsByTagName('select');
    for (var i = 0; i < selects.length; i++) {
        if (selects[i].name > select.name) {
            var eleToRemove = selectsLive[selects[i].getAttribute('name') - 1];
            console.log(eleToRemove);
            form.removeChild(eleToRemove.previousSibling); // removes label
            form.removeChild(eleToRemove);
        }
    }

Answer 1

写对了才有效

var sel= 2; // for example
var form = document.getElementsByTagName('form')[0];
var selects = form.getElementsByTagName('select');
for (var i = selects.length-1; i >= 0; i--) {
    if (+selects[i].name > sel) {
        var eleToRemove = selects[i];
        console.log(eleToRemove);
        form.removeChild(eleToRemove.previousElementSibling); // removes label
        form.removeChild(eleToRemove);
    }
}

删除所选元素之后的所有 <select> 个元素

Remove all <select> elements after the one that has been selected

javascript

select

removechild