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

debugcn 发表于 Dev

布赖恩

我有一个表单中动态生成<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);
        }
    }

谢尔盖·科秋什金

它在正确写入时起作用

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。