Удалить все <select>элементов после того, который был выбран - PullRequest
Новая
       4

Удалить все <select>элементов после того, который был выбран

0 голосов
/ 25 апреля 2018

У меня есть список динамически генерируемых <selects> s в форме. Мне нужно сделать так, чтобы, если пользователь решит вернуться к более раннему <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);
        }
    }

1 Ответ

0 голосов
/ 25 апреля 2018

Работает, когда написано правильно 

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