Доброго времени суток.
На странице есть
<div class="form-select" id="0">
<select name="select-category" id="select-category" onchange="selectCategory(this.id)">
...
</select>
В него выгружаются главные категории. При выборе одной из них - я передаю значение на сервер через ajax, и после получения json - создаю ещё один селектор (в этом селекторе дочерние категории), помещенный в такой же div, но с значением атрибута id больше на единицу и т.д.
При изменении выбора в select на любом уровне, я получаю атрибут id у .form-select, в который он завернут, после чего прохожусь по всем .form-select, и если у них id больше, то удаляю их.
...
var parent = $('#' + name_id_category).parent();
var parent_id = parent.attr('id');
$('.form-select').each(function (i) {
if (parseInt($('.form-select')[i].attributes.id.value) > parent_id) {
$('.form-select')[i].remove();
}
});
...
Но это работает не правильно. После выбора нескольких категорий (на странице 4 селектора), я меняю самый первый из них, удаляются все, кроме предпоследнего, в консоли ошибка:
Uncaught TypeError: Cannot read property 'attributes' of undefined
P.S. Уже очень долго парюсь над этим и конкретно так встрял. Возможно мое решение в целом неудачное, буду рад совету и помощи. Заранее спасибо.